Geek Answers Handbook

Hover element not working properly in css3 fade effects

I am working on a simple project in which when you hover over one block, a 4x zoom element will be displayed. I did this using pure CSS and CSS3 transition. See the jsfiddle demo. There will be four elements, each of which has different guidance elements. But when you hover over it, only one hover element is shown, although it is not associated with this block or element.

Check out the demo to get your own opinion.

.main { position: relative; width: 300px; overflow: hidden } .main a { width: 50%; height: 50%; float: left; } .main a .child { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: gray; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .main a:hover .child { -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; zoom: 1; filter: alpha(opacity=100); opacity: 1.0; } 
 <div class="main"> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>1.Text</h4> </div> </a> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>2.Text</h4> </div> </a> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>3.Text</h4> </div> </a> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>4.Text</h4> </div> </a> </div>

JSFiddle demo project

Important note: if I use display none or block on hover, set the css3 transition, then it works fine, but I need a fade effect.

+5
source share
3 answers

the problem is that the four .child elements are displayed when you hover over the element, but only the last .child is visible, to allow this function to use the visibility property instead of display

https://jsfiddle.net/f9m1mnce/

 .main{ position: relative; width: 300px; overflow:hidden } .main a{ width: 50%; height: 50%; float:left; } .main a > .child{ position: absolute; left:0; right:0; bottom:0; top: 0; visibility: hidden; background: gray; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .main a:hover > .child{ -webkit-transition: opacity 0.2s ease-in .2; -moz-transition: opacity 0.2s ease-in .2 ; -ms-transition: opacity 0.2s ease-in .2; -o-transition: opacity 0.2s ease-in .2; transition: opacity 0.2s ease-in .2; top: 0; visibility: visible; zoom: 1; filter: alpha(opacity=100); opacity: 1.0; } 
 <div class="main"> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4> </div> </a> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4> </div> </a> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4> </div> </a> <a href=""> <img src="http://placehold.it/150x150"> <div class="child"> <h4>4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4> </div> </a> </div>
+2
source

The absolute element is associated with its parent relative element, in your demo in your demo you need to set the position relative to the tag

 .main a{ width: 50%; height: 50%; float:left; position:relative; }
0
source

You can try using ::before

HTML

 <ul id="content-ul"> <li> <a href="#" target="_blank" titulo="Lorem 1"> <img src="http://placehold.it/150x150" /> </a> </li> <li> <a href="#" target="_blank" titulo="Lorem 2"> <img src="http://placehold.it/150x150" /> </a> </li> <li> <a href="#" target="_blank" titulo="Lorem 3"> <img src="http://placehold.it/150x150" /> </a> </li> <li> <a href="#" target="_blank" titulo="Lorem 4"> <img src="http://placehold.it/150x150" /> </a> </li> </ul>

CSS

 #content-ul{ display: block; width: 340px; margin: auto; overflow: hidden; } #content-ul li,#content-ul li a{ display: block; position: relative; width: 150px; height: 150px; float: left; overflow: hidden; } #content-ul li{ margin: 10px 10px ; } #content-ul li a{ text-decoration: none; color: #fff; font-size: 14px; text-shadow: 0 1px 0 #000; font-weight: bold; border-radius: 4px; } #content-ul li a img{ border-radius: 4px; } #content-ul li a:before{ visibility: hidden; content: attr(titulo); position: absolute; line-height: 250px; float: left; width: 150px; height: 150px; background: rgba(0,0,50,.5); border-radius: 4px; overflow: hidden; text-align: center; font-size: 25px; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } #content-ul li a:hover::before{ -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; zoom: 1; filter: alpha(opacity=100); opacity: 1.0; visibility: visible; }

Working demo

Here's an update based on your code:

HTML:

  <div class="main"> <a href="" content="1Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> <a href="" content="2Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> <a href="" content="3Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> <a href="" content="4Lorem Ipsum is simply dummy text of the printing and typesetting industry."> <img src="http://placehold.it/150x150"> </a> </div>

CSS

 .main{ position: relative; width: 300px; overflow:hidden } .main a{ width: 50%; height: 50%; float:left; } .main a:before{ visibility: hidden; content: attr(content); position: absolute; line-height: 250px; float: left; width: 150px; height: 150px; background: rgba(0,0,50,.5); border-radius: 4px; overflow: hidden; text-align: center; font-size: 25px; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .main a:hover::before{ -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; zoom: 1; filter: alpha(opacity=100); opacity: 1.0; visibility: visible; }

Working demo

0
source

More articles:


All Articles