I have a problem with image hover. I’m creating agency page and I have “services” tab. There are 6 images, text and button.
I coded overlay when hover an image, but it doesn’t work correctly. It works when I place a mouse on a little part of image (for example it doesn’t work when I place a mouse on a middle of image).
I noticed there is a problem with my text div. When I deleted it, everything worked fine. Also when I changed height of this div it worked good, but my button changed it’s position.
If you have any idea how can I solve it, I will appreciate.
Here’s my HTML and Codepen:
<div id="services">
<div class="images">
<div class="row1">
<div class="img1">
<img src="http://images82.fotosik.pl/266/994510792e940bac.jpg"/>
<div class="imgHover"><p>Professional Analysys</p></div>
</div>
<div class="img2">
<img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
<div class="imgHover"><p>UX/UI Design</p></div>
</div>
<div class="img3">
<img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
<div class="imgHover"><p>Strategy planning</p></div>
</div>
</div>
<div class="row2">
<div class="img4">
<img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
<div class="imgHover"><p>SEO & SEM</p></div>
</div>
<div class="img5">
<img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
<div class="imgHover"><p>Web Development</p></div>
</div>
<div class="img6">
<img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
<div class="imgHover"><p>Social Media</p></div>
</div>
</div>
</div>
<div class="services-text">
<p>We specialize in delivering the best solutions for your business. Our professional team works every day to satisfy you and improve your incomes.</p>
<button href="#">Request a call</button>
</div>
</div>
3
Answers
add
z-index
onimages
classAdd the following to your css:
You need to use
z-index
on.images
, it’s happening becausepositions
creates layers, andz-index
defines layer’s order.More info
z-index