Posted by Daguntzi on December 29, 2012 at 4:48pm
Hi,
in my home page I created a simple mouseover fade between two images and I want it to be always centered (vertically and orizontally) no matter the size of the browser window or screen resolution.
I am using Responsive Bartik D7 (http://drupal.org/project/responsive_bartik).
It works out only if the browser window is not maximize and only sized to a certain width.
Otherwise it seems that the top percentage is not functioning at all!
I tried it with the Zen theme as well and I got the same problem. The only differece was that the window had to be smaller for the css to work out....
Here is the code...
I entered this in a block:
<div id="wrapper">
<div id="crossfade">
<img class="bottom" src="sites/default/files/buttons/image2.png" />
<a href="/myweb/page1">
<img class="top" src="sites/default/files/buttons/image1.png" />
</a>
</div>
</div>... and this to the style.css:
#wrapper {
position:absolute;
top: 50%;
left: 50%;
margin-top:-208px;
margin-left: -475px;
}
#crossfade {
position:relative;
height:417px;
width:950px;
}
#crossfade img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#crossfade img.top:hover {
opacity:0;
}