Image gallery image not showing all covering by main body...please help

HTML & CSS
1

hello if anyone can help me please. i am using an image gallery which zoomed on hover on my main html template. but when image zoom it’s getting covered up with the main body. i am not that expert, may be need to change something on css file. please help. css and html code are given below also a screen shot. thanks.

CSS CODE:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.gallery {
  width: 640px;
  margin: 0 auto;
  padding: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.gallery > div {
  position: relative;
  float: left;
  padding: 5px;
}

.gallery > div > img {
  display: block;
  width: 200px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

.gallery > div:hover {
  z-index: 1;
}

.gallery > div:hover > img {
  transform: scale(2.7,2.7);
  transition: .3s transform;
}

.cf:before, .cf:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after {
  clear: both;
}

h1 {
  margin: 40px 0;
  font-size: 30px;
  font-weight: 300;
  text-align: center;
} 


body {
	margin: 0px;
	padding: 0px;
	background: #CBBB9A url(images/main-bg.jpg) repeat;
	font-family: 'Arvo', serif;
	font-size: 12px;
	color: #545454;
	
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-weight: 300;
	font-family: 'Arvo', serif;
}

h2 {
	padding: 0px 0px 20px 0px;
	font-size: 1.50em;
}

p, ol, ul {
	margin-top: 0px;
}

p {
	line-height: 180%;
}

strong {
	color: #2C2C2C;
}

a {
	color: #2C2C2C;
}

a:hover {
	text-decoration: none;
}

a img {
	border: none;
}

img.border {
}

img.alignleft {
	float: left;
}

img.alignright {
	float: right;
}

img.aligncenter {
	margin: 0px auto;
}

hr {
	display: none;
}

/** WRAPPER */

#wrapper {
	overflow: hidden;
	width: 1200px;
	margin: 50px auto;
	background: #FFFFFF;
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,.2);
}

.container {
	width: 1200px;
	margin: 0px auto;
}

.clearfix {
	clear: both;
}

/** HEADER */

#header {
	overflow: hidden;
	height: 50px;
	background: url(images/img01.jpg) repeat-x left top;
	font-size: 30px;
	color: #cccccc;
	
}

/* Logo */

#logo
{
	float: left;
	width: 350px;
	padding: 30px 0px 0px 50px;
	text-transform: uppercase;
}

#logo h1
{
	padding: 5px 10px 0px 0px;
}



#logo p a
{
	color: #FFFFFF;
}

/* Menu */

#menu
{
	float: right;
	width: 700px;
	padding: 60px 50px 0px 0px;
}

#menu ul
{
	float: right;
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li
{
	float: left;
}

#menu a
{
	display: block;
	margin-left: 1px;
	padding: 7px 0px 7px 30px;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 300;
	color: #FFFFFF;
}

#menu a:hover, #menu .current_page_item a
{
	text-decoration: none;
	border-radius: 5px;
	color: #FFFFFF;
}

/** PAGE */

#page {
	overflow: hidden;
	width: 1100px;
	margin: 0px 50px;
	padding: 50px 0px;
	border-bottom: 1px solid #DEDEDE;
}

#page h2 {
}

/** CONTENT */

#content {
	float: right;
	width: 750px;
}


/* Footer */

#footer {
	overflow: hidden;
	margin: 0px 50px;
	padding: 30px 0px;
	border-top: 5px solid #000000;
}

#footer p {
	text-align: center;
	font-size: 12px;
}

#footer a {
	color: #545454;
}

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700" rel="stylesheet" type="text/css" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />

</head>
<body>
<div id="wrapper">
	<div id="header">
		<center>heading</center>
	</div>
	<div id="page">
	  
	  

<div class="gallery cf">
  <div>
    <img src="http://abload.de/img/a6aawu.jpg" />
  </div>
  <div>
    <img src="http://abload.de/img/a6aawu.jpg" />
  </div>
  <div>
    <img src="http://abload.de/img/a6aawu.jpg" />
  </div>
  <div>
    <img src="http://abload.de/img/a6aawu.jpg" />
  </div>
  <div>
    <img src="http://abload.de/img/a6aawu.jpg" />
  </div>
  <div>
    <img src="http://abload.de/img/a6aawu.jpg" />
  </div>
</div>
	  
	</div>
	<div id="footer">

	</div>
</div>
</body>
</html>

1900×1160 279 KB

AS YOU CAN SEE THE ZOOM IMAGE IS HIDDING UNDERNEATH THE BLACK TITLE BAR. I WANT IMAGE TO BE SEEN FIRST ON TOP OF THE BAR. THANKS.

2

try adding

#header {
    position:relative;
    z-index:0;
	overflow: hidden;
	height: 50px;
	background: url(images/img01.jpg) repeat-x left top;
	font-size: 30px;
	color: #cccccc;
	
}
3

it’s still not working . i want the whole image be shown over heading bar. but its not happening. anyone please help?

1900×1160 279 KB

4

You have overflow:hidden on #page so nothing can show outside that div.

        #page {
            overflow: hidden;
            width: 1100px;
            margin: 0px 50px;
            padding: 50px 0px;
            border-bottom: 1px solid #DEDEDE;
        }

Remove the overflow and then the hover will show outside of the container. (There may be reasons why you applied the overflow in the first place but are not obvious from the demo).

5

Thanks a lot PauloOB. it’s working perfectly. Many Thanks.

6

That cannot be true, as the page, by any stretch of the
imagination, cannot be considered to be responsive. :wonky:

An example of this rather important refinement may be
found in this post here…

Image gallery image not showing all covering by main body…please help

coothead

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.