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!

csswordpressimagehoverrevolution-slider

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to properly center and repair my web page that is currently a mess

This web page I'm working on is giving me a headache. The #titlediv just won't center and the navbar keeps disappearing randomly. It seems like a big issue that I can't wrap my head around. If anyone out there can help salvage it, here' ...

htmlcsscentering

Align watermark content to the far left side

Having trouble getting my watermark to align properly on the left side of my website's main content. Here is how it currently looks: The issue arises when I resize the screen or switch to mobile view, as the watermark ends up covering the main conten ...

htmlcssreactjstypescriptbootstrap-4

Parallax Effect malfunctioning on iPhones

Hey there, I recently created a parallax UI using pure CSS. It seems to work fine on Android and desktop browsers, but when I tested it on iOS or iPhone, the parallax effect doesn't seem to be working correctly. I'm not sure why this is happening ...

htmlcssparallax

How come my DHTML navigation bar is displaying incorrectly in Internet Explorer 7?

This particular issue has me completely baffled. Normally I can navigate through most IE7 CSS bugs with some clever adjustments here and there, but this one has really stumped me! Take a look at the example page in IE7 and you'll notice that when hov ...

cssmenuinternet-explorerdrop-down-menudhtml

Prevent image element from overflowing in HTML

How can I prevent the images on the right from extending beyond the right padding? I want the fourth image to align with the red block above it. https://i.sstatic.net/KUE62.png Does that clarify things? <div style="margin: 0 15px;height: 40px; back ...

htmlcssimage

Adjusting the letter spacing of individual characters using HTML and CSS

Is there a way to set letter-spacing for each character with different sizes as the user types in a text box? I attempted to use letter-spacing in CSS, but it changed all characters to the same size. Is there a possible solution for this? Here is the code ...

javascripthtmlcssiosweb

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquerycsssafarislideshowopera

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

javascriptcssvue.jsnativescriptnativescript-vue

background gradient coloring and image blending

I have created a special class that includes a gradient background color: .banner { background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D; } Additionally, I have defined another class that adds a background ...

htmlcss

Fixing a CSS animation glitch when using JavaScript

I'm facing an unusual issue with my CSS/HTML Check out my code below: a:hover { color: deeppink; transition: all 0.2s ease-out } .logo { height: 300px; margin-top: -100px; transition: all 0.2s ease-in; transform: scale(1) } .logo:hover { transit ...

javascripthtmlcss

Sliding Menu with jQuery

My goal is to create a dynamic menu that reveals sub-menu items by sliding them down and changing the background color upon clicking. I am currently using the HTML code displayed below, with the sub1 and sub2 elements initially hidden using display:none; ...

jqueryhtmlcssmenu

display a div positioned relatively next to another div

I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Than ...

javascriptjqueryhtmlcss

Transferring data from WordPress to an Android app via JSON requests

Looking for some guidance here. I'm using an application that sends HTTP POST requests. I have a Wordpress website and I want to set up a list of prohibited license plates that we'll refer to as denied plates. This is what the app developer prov ...

androidjsonwordpress

Deleting the stylesheet exclusively within the confines of the React application window

Here is an image that will help illustrate the issue: https://i.stack.imgur.com/VA7fw.png If you want to check out the code sandbox for this problem, you can visit: https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html I am current ...

javascriptcssreactjsmaterial-ui

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

In my React application built with next.js, I am fetching a stylesheet via a GET request and appending it to the webpage. However, whenever this stylesheet is loaded in, the elements impacted by it re-render unnecessarily, even if there are no actual chang ...

javascriptcssreactjsstylesheetnext.js

React Application not reflecting recent modifications made to class

My current project involves creating a transparent navigation bar that changes its background and text color as the user scrolls. Utilizing TailwindCSS for styling in my React application, I have successfully implemented the functionality. // src/componen ...

javascripthtmlcssreactjstailwind-css

Guide to embedding CSS into a DOC file generated from HTML with PHP

I've created a document, but it's not linking to the external CSS file. I have added .css files in my code, but when I generate the document, it doesn't apply the CSS classes. Here is my code: <?php header("Content-type: application/vn ...

phphtmlcssdoc

Adjust the dimensions of the dropdown menus

I've set up 2 dropdown menus, but I'm having trouble adjusting their size. I need them to fill the screen width. Here's my code: <select id="repeatSelect" ng-model="selectedArea"> <option ng-repeat="(key,prop) in result" value=" ...

htmlcssangularjsdropdown

Change the default direction of content scrolling in CSS and JavaScript to scroll upwards instead of

I am currently working on a website where the navigation bar spans the entire width and remains fixed in place. Below the navigation bar is a cover image, followed by the main content section. As you scroll down, the navigation bar covers the image from t ...

javascripthtmlcss