Jump to content

Hover effect on images, Brine 7.0

Recommended Posts

Site URL: https://trumpet-pumpkin-rl4y.squarespace.com/work

I would like to have the same hover effect on my images (on all pages), as this site: https://www.graphicalhouse.com/work 

I think it's so nice that the text "pops" up while the image is getting darker with a slight zoom in. 

Is this possible to do? Thankful for any help 🙂 

https://trumpet-pumpkin-rl4y.squarespace.com/work

Pass: hejhej

 

 

Link to comment
22 hours ago, Simonhagstrom said:

Exactly! So basically like the website I linked to. 

Add to Design > Custom CSS

/* Work page image hover */
@media screen and (min-width:901px) {
div#page-5fc5186808845d09242c2ad6 {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.image-block img {
    transition: all 0.3s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
57 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* Work page image hover */
@media screen and (min-width:901px) {
div#page-5fc5186808845d09242c2ad6 {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.image-block img {
    transition: all 0.3s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}

 

Fantastic! Thank you so much 🙂 It worked perfectly!!

Link to comment
On 1/26/2022 at 10:23 AM, Simonhagstrom said:

Fantastic! Thank you so much 🙂 It worked perfectly!!

 

On 1/26/2022 at 9:25 AM, tuanphan said:

Add to Design > Custom CSS

/* Work page image hover */
@media screen and (min-width:901px) {
div#page-5fc5186808845d09242c2ad6 {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.image-block img {
    transition: all 0.3s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}

 

Is there any way I can make this apply to all pages? I would like to have it on the home page aswell 🙂 

Thanks! 

Link to comment
On 1/28/2022 at 4:09 AM, Simonhagstrom said:

 

Is there any way I can make this apply to all pages? I would like to have it on the home page aswell 🙂 

Thanks! 

With current page + homepage, use this new code

/* Work page image hover */
@media screen and (min-width:901px) {
div#page-5fc5186808845d09242c2ad6, body.homepage {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.image-block img {
    transition: all 0.3s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}

For all pages, use this code

/* Work page image hover */
@media screen and (min-width:901px) {
body {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.image-block img {
    transition: all 0.3s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/29/2022 at 4:17 PM, tuanphan said:

With current page + homepage, use this new code

/* Work page image hover */
@media screen and (min-width:901px) {
div#page-5fc5186808845d09242c2ad6, body.homepage {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.image-block img {
    transition: all 0.3s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}

For all pages, use this code

/* Work page image hover */
@media screen and (min-width:901px) {
body {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.image-block img {
    transition: all 0.3s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}

 

Thank you very much for the help! I tried it and it worked, but it didn't end up the way I thought. What I would like to try is to have that effect on the homepage, but only on the video.. 

Thanks again! 

Link to comment
On 2/1/2022 at 2:39 AM, Simonhagstrom said:

Thank you very much for the help! I tried it and it worked, but it didn't end up the way I thought. What I would like to try is to have that effect on the homepage, but only on the video.. 

Thanks again! 

I don't see video? https://trumpet-pumpkin-rl4y.squarespace.com/

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan My mobile version looks absolutely horrible and I don't know how to fix it...

The footer has a very large height and takes up way too much space. And I can't scroll all the way down (?) (please see attached print screens).  

I would be so happy if you could have a look at this 🙂 

This is all the code I've out into my css: 

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block
}

@font-face {   
font-family: 'NeueHaas';   
src: url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/6201767c4b483174027e3018/1644263036925/NHaasGroteskTXPro-55Rg.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017729ac7c02113052a402/1644263209676/NHaasGroteskTXPro-65Md.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017774e6ca7137a4c86535/1644263284837/NHaasGroteskTXPro-75Bd.ttf);}

.Header-nav--primary .Header-nav-item
{font-family:NeueHaas;}

.Header-branding
{
  display: none;
  }

h2 {
font-family: 'NeueHaas';}


.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}


h3 {
font-family: 'NeueHaas';}

h1 {
font-family: 'NeueHaas';}

a {
  border-bottom: none !important;
}

/* Work page image hover */
@media screen and (min-width:901px) {
div#page-5fc5186808845d09242c2ad6 {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 2s;
}
.image-block img {
    transition: all 1,5s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}


header.Header.Header--top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: ;
}
.Parallax-item:first-child {
    top: 0 !important;
}
/* mobile */
.Mobile.loaded {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}
.Mobile-bar.Mobile-bar--top {
    background: transparent;
}


.Site-inner {
  min-height: calc(100vh - 7px);
}
.footer {
  height: 10px;
}


.Footer {
  position: fixed;
  bottom: 0;
  left:0;
  right: 0;
}

Skärmavbild 2022-02-07 kl. 21.24.00.png

Skärmavbild 2022-02-07 kl. 21.24.15.png

Link to comment
On 2/8/2022 at 3:36 AM, Simonhagstrom said:

@tuanphan My mobile version looks absolutely horrible and I don't know how to fix it...

The footer has a very large height and takes up way too much space. And I can't scroll all the way down (?) (please see attached print screens).  

I would be so happy if you could have a look at this 🙂 

This is all the code I've out into my css: 

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block
}

@font-face {   
font-family: 'NeueHaas';   
src: url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/6201767c4b483174027e3018/1644263036925/NHaasGroteskTXPro-55Rg.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017729ac7c02113052a402/1644263209676/NHaasGroteskTXPro-65Md.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017774e6ca7137a4c86535/1644263284837/NHaasGroteskTXPro-75Bd.ttf);}

.Header-nav--primary .Header-nav-item
{font-family:NeueHaas;}

.Header-branding
{
  display: none;
  }

h2 {
font-family: 'NeueHaas';}


.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}


h3 {
font-family: 'NeueHaas';}

h1 {
font-family: 'NeueHaas';}

a {
  border-bottom: none !important;
}

/* Work page image hover */
@media screen and (min-width:901px) {
div#page-5fc5186808845d09242c2ad6 {
figcaption.image-card-wrapper {
    opacity: 0;
    z-index: 1000000000 !important;
}
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
}
.image-block:hover img {
    transform: scale(1.2);
    transition: all 2s;
}
.image-block img {
    transition: all 1,5s;
}
.image-block:hover figcaption {
    opacity: 1;
}
.image-block:hover .image-inset:after {
    opacity: 1;
}}}


header.Header.Header--top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: ;
}
.Parallax-item:first-child {
    top: 0 !important;
}
/* mobile */
.Mobile.loaded {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}
.Mobile-bar.Mobile-bar--top {
    background: transparent;
}


.Site-inner {
  min-height: calc(100vh - 7px);
}
.footer {
  height: 10px;
}


.Footer {
  position: fixed;
  bottom: 0;
  left:0;
  right: 0;
}

Skärmavbild 2022-02-07 kl. 21.24.00.png

Skärmavbild 2022-02-07 kl. 21.24.15.png

Sorry for the delay. Repairing the room. You mean this video?

image.thumb.png.5d28986ec1d8bf2e9346fc9b85d2e378.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I suddenly realized I used to help some members to create hover for videos...and then couldn't click on the video control anymore.

If you still haven't solved this yet, you try posting to Squarespace Customization Resource Group on FB

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 5/5/2022 at 5:42 PM, Simonhagstrom said:

@tuanphan - I added one more image on the work page of my website, and these effects don't seem to apply to the new image. Why is that? Thanks! 

Hi,

Can you describe problem again & page url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
On 1/27/2023 at 5:31 AM, lucestudio said:

@tuanphan

Thank you for this code, it's perfect. Is there a way to apply it to a gallery grid instead of image blocks? No zoom effect. Brine 7.0

  • Initial: Show image, no text
  • Hover: Show text, show overlay

Add to Design > Custom CSS (This code for Gallery Grid Section. If you use Gallery Grid Block, please share page url, we can check easier)

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.