How do I create a hover effect on an image?

Beaver Builder
1

For example - when you hover over image it:

  • adds a color overlay
  • changes to a different image
  • changes image from colour to black & white
  • hover effect(s) (i.e. flip/rotate)
  • text appear on hover

and when you click on the image it has active links

Would really appreciate your help in achieving this.

Cheers

(PS. I’m also using the BB Theme)

2

Hi Dennis,

All those types of effect can be achieved with some custom css.

Here are some good resources for css tutorials and css effects:

W3 Schools - CSS Tutorials
Free CodeAcademy HTML & CSS Class
38 Neat CSS/JS Hover Effects

Hope that helps,

Colin

3

Hi Colin,

For some reason I didn’t receive an email when you commented (I must have forgot to check notify me). I just saw it going through the forum.

Thanks for the links. I will check it out. If I have any more questions or challenges I’ll post another comment.

4

Was wondering if there are any examples using BB. Many themes have these hover effects, be good to see this in BB.

Has no-one using BB wanted to achieve this? These are the little things that make a site feel special and attractive.

Would love to hear a response from someone who has achieved this, with tips on how they did it.

Cheers

5

Hey Dennis,

Sorry to say but these can only be achieved by custom CSS. These functions aren’t built in to either the BB theme or plugin. The guys really love to keep everything simple. If you really want to see this feature in BB, head over to our User Voice Forums and add in a request. :slight_smile:

Ben

6

Hi Dennis,
as Ben and Colin already said: It’s a CSS issue. In addition to Colin’s links I can propose Scott Tolinski’s CSS Tutorials for you: LevelUpTuts Base CSS Tutorials. He has also advanced CSS3-Tutorials. All are for free.

Themes in general provide a base for the developer to build an individual website. If you leave it as is it’ll work but is just another site.

Leo

7

Thanks Leo for the link, looks like a great resource. Will definitely be checking this out along with Colin’s links.

Having the ability to hover over image to show text (i.e. show text or title of post) was asked to me by one of my BB users. I can work out how to do the color overlay, but adding the text also is a bit more challenging for me. Will have a crack at it.

Ben, I’ll add a little request for this in User Voice.

Cheers

8

Great! Have fun with BB! :slight_smile:

Ben