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

ساخت وبلاگ

آخرین مطالب

امکانات وب

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

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:

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:

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>
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.
Attached Thumbnails
Click image for larger version.  Name: IMG1.jpg  Views: N/A  Size: 46.8 KB  ID: 17193 
CodingForums...
ما را در سایت CodingForums دنبال می کنید

برچسب : نویسنده : codingforums بازدید : 188 تاريخ : دوشنبه 29 خرداد 1396 ساعت: 3:33

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه