Image Hover with Description

I Need Help
1

Any idea guys how to implement this on Blocs? @Jakerlund?

http://hasinhayder.github.io/ImageCaptionHoverAnimation/index3.html

Thanks!

2

I have the same question.
For now I decided to use this site https://codepen.io/anon/pen/VrPpjJ , so I just copy-paste the code of the hover effect I liked.

It would be great if someone suggest better idea.

3

Can you take me through how you do that?

4

Sorry for my English, but I will try to explain.

You have to understand a little bit HTML - so you could copy the correct part of code and make little changes (to change colors of the head/text/hover -gradient, change sized of the text, etc) according to the design of your website.

First you have create new container in blocsapp and put inside the bric “HTML Widget”.
Then from the site you choose favourite hover effect, lets say first one with head “NICE LILI”.
From the CSS window above - on the line 224 there are code descriptions for all kinds of hover effects:

/* Individual effects */

/*---------------*/
/***** Lily *****/
/*---------------*/

You copy and paste css code of lily effect in created early HTML-widget container in blocsapp ( …your copy-paste css code here … )

And after that you paste HTML code of the effect Lili from HTML window above from the site, you copy this part

 <figure class="effect-lily">
					<img src="https://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img01"/>
					<figcaption>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
						<a href="#">View more</a>
					</figcaption>			
				</figure>
5

Thank you - I’ll have a go now.

6

hi guys,

Sorry to dig up an old thread. Just seeing how you got on?

I am trying to create a hover on images but the text remains the same over the bottom…now on hover (image grows) I want the whole image and text to be able to be linked to either external website or another page on the website.

I have uploaded what I have currently - which I am considering moving to Blocs.

Jam-Productions-Foundation-2
Jam-Productions-Foundation-2.jpg2334Ă—754 299 KB

7

Several of these rollover effects are possible in Blocs with a little knowledge. Check out Eldar’s website for help:
https://eldargezalov.com/blocsmaster

2 Likes