Streaming live at 10am (PST)

Icon on picture and re-size on hover


#1

I can't find a good solution to add icon on picture.

The blue icon i want to expand nice and easy when hovering to get the result of this:

Additional, when clicking on picture, there will be shown more text to the left, and icon goes from + to -. When clicking on picture, the text is hiding.


#2

Hi @nasutdal85,
I would suggest to do this:
1) put image inside the div
2) make that div overflow:hidden and position relative
3) put inside that div smaller div with blue background, position:absolute, rotation: 45deg and position it so it would just cover a little bit corner
4) create interaction with hover trigger for big div, where small div will move and make "covered" corner bigger on hover and move to initial position when div will be unhovered.

Hope explanation is clear enough. :smiley:

Cheers,
Anna


#3

Hi Anna!

Thank you for the replay!

I lost you when we come to interactions… are you able to make a step-by-step her ?
I have a div block named “div-block-kx” with picture inside. Image is named kx image.
The coner is a div block named to “div block smal”

I a bit fresh with webflow, so the big nut is not cracked.


#4

I manage to get the hover on blue background, but only when hover the small div and not over the picture or big div..
Additional, it’s seems that the small div create border line like dotted, but there is none border and am not able to remove this..

Little bit progress, but still struggling..


#5

Hi @nasutdal85,
It would help to explain you better if you could share read-only link to your project.
Guidance how to share such link you can find here http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573

Regards,
Anna


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.