Jump to content

Adding a border AND changing the shape of image block on hover with CSS!

Go to solution Solved by tuanphan,

Recommended Posts

Hello all! 

Just starting to learn how to use CSS... I was wondering if I could combine a code that would allow me to add a border to an image block and then change the image shape on hover along with the border.

Right now I am using 2 different codes for each (which I'm pretty sure is the issue) but when I add the code to change the image shape on hover, the border does not change and it looks weird... the image changes shape within the border... 

How can I fix the code, if anyone knows and would be so kind as to help, please 🙂

https://porcupine-lavender-c2sl.squarespace.com  (demo)

Code I'm using:

//IMAGE BORDER//

#block-ee70ddcd6eda292ef879{
border: solid 1px black;

//CHANGE IMAGE ON HOVER//

#block-ee70ddcd6eda292ef879  img {
      transition: border-radius 2s ease-out;
}
#block-ee70ddcd6eda292ef879:hover img {
  border-radius: 500px;
}

Link to comment
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.