Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Mouse hover to change image style in wordpress

I have a website which is built by wordpress.

In portfolio list, the client wants all thumbnails black&white, and when mouse hover on one thumbnail, the image becomes color.

html code as follows

<article class="wgl-portfolio-list_item item wgl_col-1-5 residential animate" style="padding-right: 17.5px; padding-left: 17.5px; padding-bottom: 35px; position: absolute; left: 79.9974%; top: 0px;"><div class="wgl-portfolio-item_wrapper inside_image sub_layer_animation"><div class="wgl-portfolio-item_image"><img src="http://axearchitects.com.au/wp-content/uploads/2019/06/Sevenoaks-Balwyn_Optimised_2-scaled-1170x1170.jpg" alt=""></div><div class="wgl-portfolio-item_description"><div class="wgl-portfolio-item_description-inner"><div class="wgl-portfolio-item_title"><h4 class="title"><a href="http://axearchitects.com.au/projects/sevenoaks-balwyn/">Sevenoaks, Balwyn</a></h4></div><div class="wgl-portfolio-item_meta"><span class="post_cats"><a href="http://axearchitects.com.au/projects-category/residential/" class="portfolio-category">RESIDENTIAL</a></span></div></div></div><a href="http://axearchitects.com.au/projects/sevenoaks-balwyn/" class="portfolio_link single_link"><i class="portfolio_link-icon flaticon-right-arrow"></i></a></div></article>

I used this to make all images B&W:

.wgl-portfolio-item_image{
filter:grayscale(1);}

then I want to do the step of hover then change. I tried these codes one by one

.wgl-portfolio-item_image:hover{
filter:grayscale(0)!important;}

and

::selection{
filter:grayscale(0)!important;}

and

::selection, .wgl-portfolio-item_image{
filter:grayscale(0)!important;}

and

jQuery(document).ready(function( $ ){
$( ".wgl-portfolio-item_image" ).hover(function(){
  alert("hello");
    $(this).css("filter", "grayscale(0)!important");
    
});

});

(alert is just for testing if JQuery is really picking up the right class and is working)

but all of them don’t feel right and of course didn’t work.
The thing is those images don’t have ids, they just have classes like above. How can I make sure I’m changing the one that the mouse is hovering? and how I can I change image style.

Thank you

The images already have this: mouse hover, and descriptions appear. I also try to add filter change in the same {}. didn’t work.
The website was originally built with WordPress Elementor. not sure if that information helps

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just got it working.

    So there are two layers, I need to activate the first layer as well. so the right code should be:

    .inside_image.sub_layer_animation:hover .wgl-portfolio-item_image{
filter:grayscale(0) !important;}

  2. 0

    If we suppose that all your images have got the .wgl-portfolio-item_image class, all you need to do is writing the following lines inside your CSS file (or inside your style tags alternatively):

    .wgl-portfolio-item_image{
filter:grayscale(1);
}

.wgl-portfolio-item_image:hover{
    filter:grayscale(0)!important;
}

    By the way, as you are talking about hover, there is no need for ::selection.

    Have a look at the following code as an example:

    div.gallery {
  border: 1px solid #ccc;
}

.myImage{
    filter:grayscale(1);
}

.myImage:hover{
    filter:grayscale(0)!important;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
    <!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
      <img class="myImage" src="https://i.stack.imgur.com/4poyn.jpg?s=64&g=1" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img class="myImage" src="https://i.stack.imgur.com/4poyn.jpg?s=64&g=1" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img class="myImage" src="https://i.stack.imgur.com/4poyn.jpg?s=64&g=1" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img class="myImage" src="https://i.stack.imgur.com/4poyn.jpg?s=64&g=1" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search