CSS animation for image hover effect in Revolution Slider

Question

CSS animation for image hover effect in Revolution Slider

I'm currently facing an issue while using Revolution Slider. To better illustrate, I am referring to the original demo found at this link: .

When browsing through the 'portfolio' tab, you'll notice that the images shrink and darken upon hover. I would like to achieve the same effect but I am struggling to do so.

In Revolution Slider, it is possible to assign classes, IDs, and CSS to specific images. Therefore, I believe that a custom CSS code is needed to make this happen. Despite trying various codes from online sources, none of them seem to work as they always include an HTML component as well.

My understanding is that since the image is already present on the page, there is no need for additional HTML elements. Instead, I should focus on assigning classes or IDs to the images and applying a consistent CSS style across all of them.

Could someone confirm if my approach is correct? And would anyone be able to assist me with creating the necessary code?

Thank you in advance for your help!

css wordpress image hover revolution-slider

Answer 1

Answer №1

Enhance your images with CSS by adding a new class:

For instance:

<img class="slider-img">

.slider-img:hover {

{

If you need assistance with the CSS, feel free to ask.

EDIT:

Give this a try.

Surround each image with 2 divs, slider-img and img-wrap:

<div class="slider-img">
    <div class="img-wrap">
        <img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg">
    </div>
</div>

Then apply some CSS styles:

.slider-img {
  width: 200px;
  cursor: pointer;
}

.slider-img img {
  width: 100%;
}

.slider-img:hover .img-wrap {
  background-color: black;
  transform: scale(0.7);
  -o-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

.slider-img:hover .img-wrap img{
  opacity: 0.5;
}

This CSS code scales down the image container when hovering over the main div (.slider-img) using the property -webkit-transform: scale(0.7);

The darkened image effect is achieved by setting the background color of the container to black with 80% opacity.

The line -webkit-transition: all .5s ease-in-out; creates a smooth transition effect.

Multiple lines targeting different browsers (-o- for Opera, -moz- for Firefox, etc.) are included for compatibility.

Adjust the width of .slider-img according to your requirements.

View the demonstration on jsFiddle:

here

Answer 2

Enhance your images with CSS by adding a new class:

For instance:

<img class="slider-img">

.slider-img:hover {

{

If you need assistance with the CSS, feel free to ask.

EDIT:

Give this a try.

Surround each image with 2 divs, slider-img and img-wrap:

<div class="slider-img">
    <div class="img-wrap">
        <img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg">
    </div>
</div>

Then apply some CSS styles:

.slider-img {
  width: 200px;
  cursor: pointer;
}

.slider-img img {
  width: 100%;
}

.slider-img:hover .img-wrap {
  background-color: black;
  transform: scale(0.7);
  -o-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

.slider-img:hover .img-wrap img{
  opacity: 0.5;
}

This CSS code scales down the image container when hovering over the main div (.slider-img) using the property -webkit-transform: scale(0.7);

The darkened image effect is achieved by setting the background color of the container to black with 80% opacity.

The line -webkit-transition: all .5s ease-in-out; creates a smooth transition effect.

Multiple lines targeting different browsers (-o- for Opera, -moz- for Firefox, etc.) are included for compatibility.

Adjust the width of .slider-img according to your requirements.

View the demonstration on jsFiddle:

here

CSS animation for image hover effect in Revolution Slider

Answer №1

Similar questions

Centered flex item with a flexbox grid underneath

Discovering how to adjust the "border-spacing" in a React Material-UI Table to ensure each row is nicely separated

highcharts-ng expands in flexbox without contracting

Animation of CSS with an image depicting a leaf swaying gently in the breeze

Tips for creating an animated effect on the active tab when it switches

Tips for Keeping a Responsive Image at the Forefront of a Text-Image Layout as You Scroll

bootstrap3 container alignment

Exploring the challenges of using WordPress as a headless CMS in conjunction with Next.js, especially when it comes to efficiently rendering post content

Disappearance of icon upon hovering in CSS

Installing WordPress on Docker resulted in a frustrating error 500

Guide on showcasing jQuery variable values in PHP on a single page

What is the process for integrating CSS-styled text into CKEditor?

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

Unable to choose an input form within a CSS div

The font color in Bootstrap is set to be lighter than the background color

Ways to locate CSS file path within a web browser

I encountered an issue while attempting to link my project to a database. An error popped up stating that the name 'textbox' does not exist in the current context

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

What's the solution for aligning these progress bars side by side if floating them doesn't produce the desired result?

Issue with CSS background images