Title Hover on Images in SquareSpace Custom CSS

I am currently working on my SquareSpace website and I want to customize the CSS for 3 specific images on my cover page. Right now, when you hover over the images, the opacity changes and a blue block with the image title appears. However, I am looking to make the blue block larger while ensuring that it fits perfectly around the image itself. In the provided image example, you can see there is a slight overhang:

https://i.sstatic.net/To9jS.png

Any assistance with this would be greatly appreciated!

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
  display: block;
  position: relative;
  top: -15px;
  text-align: center;
  opacity: 0;
  background-color: #1E75BB;
  margin-bottom: 0px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
  display: block;
  opacity: 50;
  background-color: none;
  text-align: center;
  width: 100%;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
  font-family: adelle-sans;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
  font-family: adelle-sans;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
}

@media only screen and (max-width: 75px) {
  .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
    opacity: 50;
  }
}
csssquarespace

Answer №1

Each image in this collection has its own unique dimensions but shares a common class (div.image-slide-title).

One approach is to standardize the image sizes by editing them all to be 248px wide, including the div.image-slide-title element which should also be set to 248px width.

https://i.sstatic.net/9NZU7.png

Alternatively, each image could be isolated with a new class or ID (e.g. div.image-slide-title-1, div.image-slide-title-2, div.image-slide-title-3) and given additional styling for centering and proper width:

  • Add margin: 0 auto; to center the images.
  • Set the desired width for each image within the blue block (e.g. the last one should have a width of 248px).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Place anchor tags in the middle of a navigation bar div

Having some trouble aligning the items in my navigation bar. I plan to include some svg icons in the nav bar later on, but for now, I can't seem to get the alignment right. Any ideas? It's probably a simple fix, but I've tried various metho ...

htmlcss

Styling specific to Nuxt.js layout with scoped css

Currently, I am using Nuxt and have a header layout for my navigation that has a white background color. However, on a specific page, I would like to change the navigation background color to be transparent (only for this page). I have attempted a few so ...

cssvue.jsnuxt.js

Only the box that I click on will receive the applied color

I am facing an issue with applying colors to the label colorCheckBox, each with a unique data-id that is derived from the variable colorBoxId, which is globally accessible using colorBoxId = $(this).closest('tr').data('id');. The proble ...

jqueryhtmlcss

Differentiate the Input Types in HTML

If this question has been raised previously, please verify if it is the same query. I am currently working with Materialize CSS and I am interested in learning how to use multiple types simultaneously. For example: <input id="login_password" type="sea ...

htmlcssinput

Ways to generate an element with a specific identifier using a single line of code

When creating an element, I often use the following syntax: var foo = document.createElement('div'); To set the ID of the div, I would typically do this: foo.setAttribute('id', 'divName'); After some searching online, I ca ...

javascriptjqueryhtmlcss

Styling with CSS to have radio buttons positioned on the left side of the label

Struggling to shift the labels of my radiobuttons to the left using CSS, but nothing seems to be working. Can anyone lend a hand with this? asp:RadioButtonList ID="rbid" runat="server" RepeatDirection="Vertical" RepeatLayout="Table" TextAlign="left" > ...

asp.netcss

How can I customize the color of grayed-out days in Fullcalendar's validRange?

Hello there, I am currently using fullcalendar version 5.10.1 for my project and I am looking to change the color of already passed days to a more grayish tone as shown in the picture. Unfortunately, I am unable to utilize Ajax and can only use CSS styles. ...

javascriptcsstypescriptfullcalendar

Aligning text at the center of the page, stacked on top of each other

I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...

htmlcsstwitter-bootstrap

Add a unique design to a list element with CSS

I've successfully arranged a simple list in a line with a background image for all items. However, I want to have a different background image for specific list items (List item 3) without resorting to using !important. Below is the code I am currentl ...

htmlcss

What steps should I take to ensure proper spacing on my website? (admin inquiry)

I'm currently working on a website called www.confiam.com.br, which is a project built with Django. While making some adjustments recently, I unintentionally broke something related to the formatting of paragraphs. Now, the spacing doesn't seem r ...

htmlcssdjango

Modifying the appearance of a CSS element with jQuery: Step-by-step guide

The code I have is as follows: $('.signup-form-wrapper').css("style", "display: block"); $('.login-form-wrapper').css("style", "display: none"); I'm not sure why it's not working. The current appearance of ...

javascriptjquerycss

How can I fix the body on iOS while allowing the div to scroll smoothly?

To ensure full compatibility, I implemented a "hack" for older iOS devices by fixing the position of my page body. This prevents elements from scrolling and provides a solution to keep multiple page elements fixed on the screen of those devices. I created ...

htmlioscss

Direction of hover effect (crossfade image)

My goal is to create a hover effect that involves crossfading images. The setup includes two images: img-2 and img-1, along with text overlayed on top, creating layers as follows: [img2]>[img1]>[text]. When hovering over the text layer or the front i ...

jqueryhtmlcssimagehover

Incorporating multiple classes in an HTML document

Can multiple classes be added in HTML? Here is the code I attempted: <a href="#" class="class1 class2">My Text</a> Appreciate your help! :) ...

htmlcss

Maintain the background div while scrolling horizontally

I am facing an issue with my wide bar chart where I use iScroll to enable horizontal scrolling. Behind the bar chart, there are horizontal lines that should move along in the background as the user scrolls horizontally. The challenge is to keep the lines v ...

htmlcss

Manipulating Select Options with JQuery impacts every select option on the webpage

On my HTML page, I have two select options. To format one of the select options using JQuery, I used the following code: $('select').wSelect(); However, this formatting is also being applied to the other select option. I do not want the JQu ...

javascriptjqueryhtmlcss

A guide on adding an option to a dropdown menu in HTML

I have a variable that stores a number. My goal is to dynamically add options to a select element based on the value of this variable. For example, if the variable equals 10, I need to append 10 options to the select element with each option displaying the ...

javascriptjquerycss

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...

javascripthtmlcsssvg

What is it about the phone screen that makes media content so captivating?

My phone has a resolution of 2280x1080. I noticed that when using the following code, the background color changes to blue on my phone: @media (max-width: 500px) { body { background-color: blue; } } Interestingly, this feature stops working once "compute ...

htmlcssmedia-queries

Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Currently working on a multi-level flyout menu to be integrated into a daterange picker for selecting time periods. Check out the jsfiddle link here: https://jsfiddle.net/6t72hd4x/1/ I attempted to set overflow-y: auto; in the .inner-list class to handle ...

htmlcss