Question

I don’t know why, but the :hover state is not working for the .social images. When I just isolate them and their class in a separate HTML file, they work. So something must be interfering in the rest of my code, I suppose.

Here’s my HTML and CSS:

<link href='http://fonts.googleapis.com/css?family=Lato:400' rel='stylesheet' type='text/css'></link>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.social{
border-radius:100%;box-shadow:0px 1px 0px white;height:30px;opacity:0.4;
}
.social:hover{
opacity:1;
}
</style>
<style>
.button{
font-size:17px;color:#c3c3c3;text-shadow:0px 1px 1px white;padding:13px;padding-left:20px;padding-right:20px;border:1px solid #c3c3c3;border-radius:4px;box-shadow:0px 2px 7px -3px #c3c3c3;background: #eaeaea; background: -moz-linear-gradient(top, #eaeaea 0%, #dddddd 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#dddddd)); background: -webkit-linear-gradient(top, #eaeaea 0%,#dddddd 100%); background: -o-linear-gradient(top, #eaeaea 0%,#dddddd 100%); background: -ms-linear-gradient(top, #eaeaea 0%,#dddddd 100%); background: linear-gradient(to bottom, #eaeaea 0%,#dddddd 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#dddddd',GradientType=0 );
}
.button:hover{
box-shadow:0px 1px 1px white;
}
</style>
<div style="position:absolute;top:0px;left:0px;height:100%;width:100%;background: #f2f2f2; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #f2f2f2 0%, #cecece 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f2f2f2), color-stop(100%,#cecece)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #f2f2f2 0%,#cecece 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #f2f2f2 0%,#cecece 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #f2f2f2 0%,#cecece 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #f2f2f2 0%,#cecece 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cecece',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */">

<div style="position:absolute;right:25px;top:25px;">
<img src="http://cdn1.iconfinder.com/data/icons/social/128/picons33.png" class="social">&nbsp;&nbsp;<img src="http://cdn1.iconfinder.com/data/icons/social/128/picons48.png" class="social">
</div>




<div style="position:absolute;top:0px;left:0px;width:100%;height:100%;">
<center>
<div style="width:900px;position:relative;height:100%;border:0px solid black;text-align:left;">
<img src="http://i46.tinypic.com/169i979.jpg" style="height:750px;position:absolute;bottom:0px;left:-350px;">


<div style="position:absolute;top:115px;right:0px;font-family:Lato;width:415px;">
<div style="font-size:75px;color:#f5f5f5;text-shadow:0px 2px 3px #c3c3c3;">dumbsearch.</div><span style="text-shadow:0px 1px 1px white;font-size:23px;color:#c3c3c3;">It's search like you've never seen or used.</span><br><span style="text-shadow:0px 1px 1px white;font-size:23px;color:#c3c3c3;">Scroll down to learn more.</span>

<br><br><br>

<span class="button">Apply to be a beta tester</span></div>
</div>


</div>
</center>
</div>
</div>

Thanks a lot in advance! 🙂

Answer 1

It appears that the parent div of the two .social image elements, which is position:absolute, is been overlapped by its sibling div. By applying a positive z-index CSS style to it, the problem will be solved.