NLDutchy NLDutchy - 6 months ago 49
CSS Question

Image hover CSS for revolution slider

I'm using revolution slider and I'm stuck with a problem. As an example I use the original demo from here:

On the tab 'portfolio' you see images that shrink in size with a transition and look a bit darker when you hover over them. This is what I want as well but I can't figure out how.

In revolution slider you can add classes, ID's and CSS to specific images so what I probably need is a CSS code that makes this possible. I've tried several codes I found online but none of them do the trick because they all come with an html part as well.

My guess was: the image is already there, I don't need the html part, only assign classes or id's to the images and then give each image the same kind of CSS code.

Am I on the right track with this? And can anyone help me with the code for it?

Many thanks in advance!


add a class, then do some css

for example:

<img class="slider-img">

.slider-img:hover {


let me know if you need help with the css.


try this.

wrap each of your images around 2 divs, slider-img and img-wrap:

<div class="slider-img">
    <div class="img-wrap">
        <img src="">

then do some css:

.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;

basically what the css is doing is that when you hover over the main div (.slider-img), the div containing the image (.img-wrap) gets scaled down by 70% by the css -webkit-transform: scale(0.7);

it also gets a background color of black with an opacity of 80%. this gives the darkened image effect.

-webkit-transition: all .5s ease-in-out; gives a smooth transition effect.

if you are wondering why there are 5 different lines of css for the same thing, thats because each line targets specific browsers. -o- is opera, -moz- is firefox etc.

also, make sure to change the .slider-img width to match your needs.

check out the working example on js fiddle: