CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James Burton
James Burton

Reputation: 94

Highlighting images on mouse enter

I have 4 images which will be thumbnails for news articles. When the user moves their mouse over one of the images I want it to highlight. I have done this by placing a div of the same size over the image. I then tried to use JQuery to add a class to that div on mouse enter which would make it a slightly see through blue box as shown here.

HTML:

<div class="col-5 parent-center">
    <div id="news1" class="news-highlight"></div>
    <img src="images/news.jpg" class="news-image"/>
</div>

I know that in the JQuery I use .content as a reference to find the IDs of the news images faster. That does exist I just didn't copy in that far up the code because it would have resulted in a lot of code unrelated to my problem being pasted in.

CSS:

.news-image
{
    height: 100%;
    width: 90%;
    border: solid 2px #14a0dc;
}

.news-highlight
{
    height: 100%;
    width: 90%;
    position: absolute;
    background-color: #14a0dc;
    opacity: 0.6;
}

JQuery:

function highlightNews(newsDiv)
{
    newsDiv.addClass('news-highlight');
}

function unhighlightNews(newsDiv)
{
    newsDiv.removeClass('news-highlight');
}

$(document).ready(function()
{   
    var $content = $('.content');
    var $news1 = $content.find('#news-1');
    var $news2 = $content.find('#news-2');
    var $news3 = $content.find('#news-3');
    var $news4 = $content.find('#news-4');

    function newsMouse(newsDiv)
    {
        newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
    }

    newsMouse($news1);
    newsMouse($news2);
    newsMouse($news3);
    newsMouse($news4);
});

Now you're probably crying after seeing my JQuery, I'm trying to learn it on the fly so I don't really know what I'm doing.

Thanks in advance :)

Upvotes: 3

Views: 870

Answers (5)

Th4n0s
Th4n0s

Reputation: 76

If I understand what you want correctly, you should just need to change the colour of the div on top of your images when they are hovered on. This can easily be done with CSS. This should work:

.news-highlight
{
    background: rgba(51, 153, 255, 0);
}

.news-highlight:hover
{
    background: rgba(51, 153, 255, 0.5);
}

This will give the div a semi-transparent blue colour when the user hovers the cursor over it, and the image will show through.

You could also change the images to a greyscale at the same time, which may improve the effect.

EDIT: I should have also stated that you need to change the order of your html to this:

<div class="col-5 parent-center">
    <img src="images/news.jpg" class="news-image"/>
    <div id="news1" class="news-highlight"></div>
</div>

now the .news-highlight div will appear on top of your img.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122037

If you want to use JQuery to do something like this, one option is to use hover and toggleClass 

$('.news-image img').hover(function() {
  $(this).toggleClass('news-highlight');
});
.news-image {
  float: left;
  width: 33.3%;
  padding: 5px;
  box-sizing: border-box;
}

.news-image img{
  transition: all 0.3s ease-in;
  width: 100%;
}

.news-highlight {
  opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
  <img src="http://placehold.it/350x150">
</div>

<div class="news-image">
  <img src="http://placehold.it/350x150">
</div>

<div class="news-image">
  <img src="http://placehold.it/350x150">
</div>

Upvotes: 1

Alexandr
Alexandr

Reputation: 1031

Here is jsFiddle how does hover effect work. Practice is the answer! jQuery not required for something this simple

.news-image
{
    height: 100%;
    width: 90%;
    border: solid 2px #14a0dc;
}

.news-image:hover
{
    height: 100%;
    width: 90%;
    position: absolute;
    background-color: #14a0dc;
    opacity: 0.6;
}

Upvotes: 0

Siddharth
Siddharth

Reputation: 869

you can do this using pure CSS. basically highlighting is nothing but box-shadow or border on the hover.

.news-image:hover{
   border:solid 1px red;
}

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Why don't you make it with pure css without nothing of js?

.news-image
{
    height: 100%;
    width: 90%;
    border: solid 2px #14a0dc;
}

.news-image:hover
{
    height: 100%;
    width: 90%;
    position: absolute;
    background-color: #14a0dc;
    opacity: 0.6;
}
<div class="col-5 parent-center">
    <div id="news1" class="news-highlight"></div>
    <img src="images/news.jpg" class="news-image"/>
</div>

Upvotes: 3

Related Questions