thewolvesdenvisualco

Hello! Yes so it is 2 blocks with 4 images each, and I am looking to do it with all images. my website is www.kevinplumley.com no password as it is live. It is the main page in question

Hello, I am currently using 7.1 on my site and what I am looking to do is have an image roll over to a gif on hover-over. currently, I have each gif just constantly looping, and I feel like it looks a little hectic that way. The gifs are placed within a gallery block with a full bleed Grid strip if that matters at all. As an example, I am looking to achieve a similar result to this site. https://www.simoneaves.com/home-reshaped-gifs Thank you for any help

After some tinkering, I ended up figuring it out! I at least wanted to post a follow-up for any future users experiencing similar issues. So what I did to fix this was go into Advanced>Blog Post Item Code Injection and make the following changes to the code. <style> .entry-header {display: contents;} .entry-footer {display: contents;} </style> It took a lot of time in Inspect Element to trace why the header image was being forced into each blog post and what class the image was directly affecting but I got it. In a previous attempt, I had the display set to hidden instead and while that did hide the image I used as a header, it also hid metadata such as likes, tags, author, and title, so I don't recommend that unless that is your intention. Just as a quick recap, I am using Squarespace 7.0 with the Bradford template. My Original code was fine (although admittedly suboptimal and amateur.)

I gave that a try and I ended up getting the same result as original code you provided but thank you for taking a look! i added a image for a banner and it moved the title to the new image but still leaves that little tab with my graphic so I’m not sure if it’s a issue with .banner or something else

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper { height: 100%; width: 100%; overflow: clip; } //subtitle// #block-yui_3_17_2_1_1676622874538_32976 { h3 { color: #9B0000; font-family: proxima nova; font-weight: 400; font-size: 20px; } } #block-191dfa1409541257bcdc { header{ display: none;} } //FONT & HEADINGS// @font-face {font-family: 'Olondon2'; src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb8f3ebb72d96ab4819c79/1676382014756/Olondon2.otf)} @font-face {font-family: 'IMFellDWPica-Regular'; src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11b41c33165ca943dcb2/1690177972344/IMFellDWPica-Regular.ttf); } @font-face {font-family: 'IMFellDWPica-Italic'; src: url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/64be11ac011e0221bc2202e5/1690177964773/IMFellDWPica-Italic.ttf);} #has-site-title site-title { font-family: "Olondon2"; } h4 { color: black; font-family: Bebas Neue; font-weight: 400; font-size: 100px; } h5 { color: red; font-family: proxima nova; font-weight: 400; font-size: 50px; } //TWD VC Page// #block-yui_3_17_2_1_1688779912129_19305 { header{ display: none;} } #block-yui_3_17_2_1_1690173102104_56674 {font-size: 14px;} #block-yui_3_17_2_1_1690175254307_13409 { header{display: none;} h1 { color: #FFE9B3; font-size: 70px; font-family: "IMFellDWPica-Regular";} background-color: #000000; height: 90px; position: center; } #block-yui_3_17_2_1_1688785183211_4040 { header{ display: none;} } #block-yui_3_17_2_1_1690173102104_38061 header{ display: none;} //Header & Footer// #siteWrapper { background-color: #000000 ; /* make this your darkest color */ background-image: linear-gradient(#ffffff,#ffffff,#BABABA); } header{ background-size: cover; width: 200px; height: 200px; background-position: center top 0px; background-color:transparent!important; background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important; background-repeat: no-repeat; } footer{background-size: cover; width: -200px; height: 370px; background-position: center top -0px; background-color:transparent!important; background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important; background-repeat: no-repeat; } prefooter { height: 01px; /* adjust the height to your desired size */ padding: 0px;} //Graphic Design Blocks// //Index Block// #collection-63ee49462e985d0e53894342 { width: 100%; height: auto; } #collection-63ee2a5506fcdf43537835da h1{ text-decoration: underline overline black; color: #9B0000; } //4k @media screen and (max-width: 3840px) { //For 4K Displays (Ultra HD) header{ background-size: cover; width: 200px; height: 400px; background-position: center top 0px; background-color:transparent!important; background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important; background-repeat: no-repeat; } footer{background-size: cover; width: -200px; height: 370px; background-position: center top -0px; background-color:transparent!important; background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb63369723a241feceaa40/1676370750758/footerv2.png)!important; background-repeat: no-repeat; } } Of Course, Forgive me if this is very sloppy and suboptimal

that seemed to have fixed the issue with the blog, but it now made my header shrink significantly

Forgive me if I'm mistaken, but here is the code I'm using that would affect my header. .view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper { height: 100%; width: 100%; overflow: clip; } #siteWrapper { background-color: #000000 ; /* make this your darkest color */ background-image: linear-gradient(#ffffff,#ffffff,#BABABA); } header{ background-size: cover; width: 200px; height: 200px; background-position: center top 0px; background-color:transparent!important; background-image:url(https://static1.squarespace.com/static/533494a4e4b0d765125378e0/t/63eb64875435a502cffda7e8/1676371086864/headerv2.png)!important; background-repeat: no-repeat; }

Hello, I am definitely a rookie when it comes to web coding, but I think I’ve managed myself pretty well at this point. Previously I had added code to make my header a image, and that’s been great, but now I’m trying to start up a blog page, but in the Title a part of that same image used in the header is now clipped under the title of my blog post. Any one have any idea on how to fix this? Screenshot posted below and link to blog can be found here. https://www.kevinplumley.com/blog