dinodino11 dinodino11 - 2 months ago 6
CSS Question

How to make hover gradient on a div element like on Wella.com?

I need to make a gradient hover effect on a div element (example: http://www.wella.com/professional/en-UK/home )

How can I do it? Is it better to use jQuery or css? I was trying to use Chrome developer tools to find out, but in vain. Please, can someone help me with that?

Thanks

Answer

EDIT: As commented you wanted to have a bg-image with the gradient effect on top. So using :hover you can actually target a different class, so it would go like this:

Check the updated fiddle

Updated CSS:

.hoverable {
  width: 80%;
  height: 50vh;
  background-image: url('http://media.wella.com/professional/m/_master/homepage/Home%20Gallery%20Item/for-all-latest-news_d.jpg');
  background-size: contain;
}

.hoverable:hover .content {
  background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
}

CSS is probably your best choice, you can catch the :hover event on your css to apply the desired gradient over the div you intend.

Check this Fiddle for more information, but it goes like this:

HTML:

<div class="hoverable">

 <div class="content">
   Really nice in here
 </div>
</div>

CSS:

.hoverable {
  width: 80%;
  height: 50vh;
}

.hoverable:hover {
  background: -webkit-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
  background: -moz-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
  background: -o-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
  background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
}

.content {
  width: 100%;
  height: 100%;
  color: black;
}

Hope it helps! Cheers