Hi all, I want to know how to create this feature for my portfolio on Webflow. I want to show a project on the home page as a thumbnail image, but then when a viewer hovers over the image, the image decreases in opacity and the title text appears in the center of the thumbnail.
An example of what I want to do implement is from this portfolio I found: https://sisi-yu.com/.
Does anyone know a simple way to do this with hover states and overlapping text on image blocks?
Hi @ahassonj and welcome, interaction you are asking is fairly simple and easily done in Webflow. I will recommend to check Webflow University to get familiar with this program. Here is one VIDEO for hover effect as an example. But you will find more videos and articles about basics on internet.
Hi Stan, Thank you so much, I’ve tried watching the video for hover effect you linked, but am struggling to apply it so that the title text appears in the center while the image opacity decreases at the same time. Would you suggest instead of changing hover states for individual elements i look into creating animations on hovering for the entire link block instead? I am struggling to have both the animations appear simultaneously.
Hey,
you should probably have a on-hover interaction that decreases the opacity of the image from 100-0 and at the same time increases the opacity of the text from 0-100 
Thank you so much, I got it to work using the animations.