Jump to content

Exclude gallery images from 'a img' CSS selector

Recommended Posts

Hi everyone,

I have used the below simple code to make all hyperlinked images on my page increase in size when hovered over. This has worked well but due to the gallery images being within an 'a' tag, even without links associated with them, these images are also effected by the code.

a img.thumb-image:hover {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
}

Is there a nice way to exclude the gallery from this code? I had the idea of using the :not selector to exclude the gallery images from the code, however they are included in the same classes as my other hyperlinked images so it was not that simple to do.

The gallery is housed as a single section of the home page. See website link below. 

https://www.ampflo.com.au

Link to comment
  • Replies 1
  • Created
  • Last Reply

Update:

I managed to get the functionality i was looking for by splitting the code up, one for my internal pages and one for my index style pages. I was then able to exclude the particular index page ID.

.general-page {
a img.thumb-image:hover {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
}
}  
.page-content:not(#clients-page) {
a img.thumb-image:hover {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
}
}  

I feel that there is probably a tidier way to do this and would welcome any feedback, but for now the page works as I would like!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.