Jump to content

List rotate on hover with rounded corners

Recommended Posts

Hi! I have simple list with items that rotate on hover. However, I cannot figure out how to round the corners. I added {border-radius: 10px} to the code but it doesn't seem to be working. Has anyone had luck with this? The site is https://www.affabletax.com/. The code I'm using is: 

 

//list rotate on desktop//
section[data-section-id="645002e96aefb16311b13bbc"] {
@media only screen and(min-width:640px){
 .list-item-content {
   transform:rotateY(180deg);
   transition: all .5s;
   margin-top:-65%;
   padding-bottom:30%!important;
   padding:1rem;
   border-radius: 10px;
   opacity:0;
  }
  .list-item:hover  .list-item-content {
   transition: all .5s;
   transform:rotateY(0deg);
   opacity:1;
   border-radius: 10px;
  }
  .list-item-media img{
   transform:rotateY(0deg);
   transition: all .5s;
 }
 .list-item:hover  .list-item-media img{
   transition: all .5s;
   transform:rotateY(180deg);
   opacity:0
  }
  .list-item:hover  .list-item-media{
     transition: all .5s;
     transform:rotateY(180deg);
     background-color:#2AB4F7
  }
}
}

 

 

Edited by SmallSitesSarah
Link to comment
  • Replies 3
  • Views 269
  • Created
  • Last Reply

Top Posters In This Topic

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 6/12/2023 at 12:05 AM, creedon said:

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Whoops. Just added it: https://www.affabletax.com/

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.