Jump to content

Display image on hover to text

Recommended Posts

Hi Squarespace peeps!

I wonder how do get this effect to have image display when on hover to text, and at the same time have the rest of the text turn other color? 

 

Currently I'm having code below that display the image only, thanks in advance! 

.zeit:hover:before {
  content: '';
background: url('https://static1.squarespace.com/static/5f5d6362095e157f76523586/t/615aafbb1ab568669d929975/1633333181522/Frame+195.png');
  background-size:contain;
  background-repeat:no-repeat;
width: 910vw; 
left: -5vw; 
height: 30vh; 
margin-top: -50px;
position: absolute;
opacity:1;
transition: transform .4s cubic-bezier(.86,0,.07,1),opacity .4s cubic-bezier(.86,0,.07,1);
   transform: translate3d(.33333vh,-11.66667vh,0);
  -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
            animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;


      
}
.zeit:hover {
   font-size:70px;
  font-family: 'montserrat';
   font-style: normal;
  font-weight: bold;
   color:#DB5703;
}
.zeit {
  text-align:center;
  font-family: 'montserrat';
  font-weight: bold;
   font-size: 60px;
   margin-bottom: 20px;
  color: #444444;
}

Screen Shot 2021-10-04 at 1.30.35 PM.png

Link to comment
  • Replies 1
  • Views 532
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi,

If you use Squarespace 7.1, you can achieve this with Portfolio Page 

https://support.squarespace.com/hc/en-us/articles/360035611791-Portfolio-pages#toc-portfolio-page-layouts

If you use SS 7.0, let me know. We will try finding another solution

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.