add ROLLOVER EFFECT TO THUMBNAILS

  • mr orange

    (@mr-orange)


    15 years ago

    Hey guys, I was also wondering about this, but I want to add a “rollover effect” like there is here

    I know how to add opacity rollover like at hypebeast but I want something with color and text.

    Any advice? I know how to make it with html, but am having trouble getting it to work with php.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    post your html solution here and someone might be able to ‘translate’ this into php.

    Thread Starter mr orange

    (@mr-orange)

    <a href="https://www.google.com/" rel="bookmark" title="Google">

              <div class="img" style="position: relative; width: 214px; height: 180px;">

                <div class="imghovergrid">&nbsp;</div>

                <div class="imghovertextgrid">This is custom field test<br />Date</div>

                <img width="214" height="180" src="https://www.IMAGE SOURCE .jpg" class="attachment-thumbnail" alt="" title="title.jpg" />					</div>

 </div> <!--align left-->

          </a>

        </div><!--post-->

</body>
</html>

    The CSS:

    <style>
.imghovergrid {
z-index: 900;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #ff6600;
color: #ffffff;
}

.imghovertextgrid {
z-index: 901;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 11px;
color: #ffffff;
display: block;
}

a img {
	border: none;
	}

    Thats the raw html and css, it uses jquery for the rollover effect. Basically it places an absolute positioned div that overlays the thumbnail image’s div, it gets shown during the hover state (jquery comes in there for that effect)

    the query looks something like this:

    $('.imghovergrid').fadeTo(0,0);
$('.imghovertextgrid').fadeTo(0,0);

    $(".imghovertextgrid").hover(function () {
        $(this).fadeTo(0, 1);
        $(this).prev(".imghovergrid").fadeTo(0, 0.75);
      },
      function () {
        $(this).fadeTo(0, 0);
        $(this).prev(".imghovergrid").fadeTo(0, 0);
      }
    );

}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘add ROLLOVER EFFECT TO THUMBNAILS’ is closed to new replies.