image hover effect using the image module

Beaver Builder
1

hi guys how do i add this CSS below to an image using the image module…

its an effect that just zooms in a little to an image when you hover/roll over it.

Thank you…

.image { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .image:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
2

Hey Jason,

Thanks for getting in touch! You can place that code to the style.css file of your theme. This can be found under Appearance > Editor(only advisable when using a Child Theme). Or if your theme offers a place to put these codes in I would suggest using that. If you’re using the BB theme, you can place this under Theme Customizer > Code > CSS Code.

After the code is in place, you can use the Photo module for your image, then add a class of image under Advanced.

Also, it would work much better this way. :slight_smile:

.image img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.image img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Hope this helps!

Ben

3

thanks ben…

4

hey Ben

i want to add text over the image on hover like this

http://codepen.io/RoryMearns/pen/QbjOjY

is that possible with the image module or how else would i do it?

thanks
Jason

5

Hey Jason,

No worries! You can do that with our Gallery module, but not the Photo module. :slight_smile:

Ben

6

OK great thanks Ben

I’ll have a little play… if i get stuck may i ask for your help?

7

For sure! Just let us know if you need anything! :slight_smile:

Ben

8

[Content Hidden]

9

Hey Jason,

I just realized that the overlay covers the entire image. Sorry, but as you can see, our Gallery module only does the overlay on the bottom part. If you really want to make it exactly like that I guess you could go with a more robust gallery plugin.

Ben

10

thanks Ben for your prompt reply… appreciate your support.

i want to avoid a plugin if i can…
is there no way to create an image with an effect like that just using beaver builder…

here is the css for the effect.

figure {
  position: relative;
  float: left;
  max-width: 500px;
  min-width: 250px;
  width: 45%;
  overflow: hidden;
  display: block;
  text-align: center;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

figcaption {
  cursor: pointer;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  z-index: 100;
  padding: 15px;
  font-weight: 100;
}

/* --- Setting up the elements that will change --- */
.im-gonna-change p, .im-gonna-change h3 {
	transition: opacity 0.35s, transform 0.35s;
}

.im-gonna-change figcaption{
  transition:0.35s ease-in;
}

.im-gonna-change h3 {
  poition: absolute;
  opacity: 0;
}

.im-gonna-change p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 10px;
	width: 100%;
	opacity: 0;
}

/* --- All the changes on hover --- */
.im-gonna-change:hover figcaption {
  transform: translate3d(0,0,0);
  background-color: rgba(0,0,0,0.6);
}

.im-gonna-change:hover h3 {
	color: #fff;
  opacity: 1;
	transform: translate3d(0,10px,0);
}

.im-gonna-change:hover p {
  color: #fff;
	opacity: 1;
	transform: translate3d(0,-10px,0);
}

and here is the html

<figure class="im-gonna-change">
    <img src="http://i.imgur.com/WtHEiWH.png" alt="truck" />
    <figcaption>
      <h3><span>BIG</span> TRUCK</h3>
      <p>AND THE COAL</p>
    </figcaption>
  </figure>
11

Hey Jason,

If you want, you can use the HTML module and create your own markup. Currently, there is no way to achieve this with just the BB modules. You’ll have to do a lot of customization.

Ben

12

[Content Hidden]

13

Hey Jason,

That is because you’ve placed a height on the div element containing it. The image resizes but the value of the height is static. I’d suggest removing that height property.

Ben

14

thanks but not sure what you mean Ben… shall i change the height to 100%

15

Hey Jason,

I was referring to this CSS.

.cat2 {
    overflow: hidden;
    max-width: 400px;
    height: 164px;
    border: 2px solid #f2f1ee;
    z-index: 0;
    margin: auto;
}

Ben

16

Hi Ben,

I’ve borrowed your image zoom code here: http://tpl0010.1stbydesign.com (see the three portrait images side by side half way down the homepage.

You can see the zoom effect, but the zoom is expanding the image border as well, instead of keeping the container the same size and zooming the image inside of this.

Can you see what I am doing wrong. Any suggested fix most appreciated.

Cheers Fenwick

17

Hey Fenwick,

The CSS snippet below should do the trick! :slight_smile:

.image .fl-photo-content {
  overflow: hidden;
}

Ben