CODEWITHSUNDEEP
wordpressimageoverlay
DJP2019
DJP2019

Reputation: 69

title overlay on hover of image

I have an interesting problem, wonder if anyone can help me with a solution;

I'm wondering if it's possible to create a function in wordpress that would do the following;

If I upload an image and wrap it in a class, say 'feature', and I link it to a wordpress page, is it possible to create a function that when the image is hovered it changes the image with a color and overlays the title of the linked page? or even the image title which has been set?

Following on from this I've found this snippet;

$(function() {

$("img[class^='imglink']").each(function(){
    var imgTitle = $(this).attr('title');
    $(this).wrap('<div class="overlay-container"></div>');
    $(this).after('<div class="overlay">'+imgTitle+'</div>');

});
});

But any idea how to implement it within Wordpress; Im a total novice when it comes to this;

thanks

Any help or ideas would be great

Upvotes: 1

Views: 1787

Answers (1)

APAD1
APAD1

Reputation: 13666

Your question is pretty broad, but you can do this using CSS only, no need for Javascript. Here's something to get you started:

.feature {
  height:250px;
  width:250px;
  background:url('http://placehold.it/250x250');
  position:relative;
}
  .feature:hover {
    background:red;
  }
    .feature:hover .title {
      display:block;
    }
.title {
  width:100%;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:none;
}
<div class="feature">
    <div class="title">Example Title</div>
</div>

Upvotes: 1

Related Questions