Jump to content

Hover effect on images, Brine 7.0

Recommended Posts

Posted
1 minute ago, tuanphan said:

You mean

  • Initial: Show image, no text
  • Hover: Zoom in image a bit, show text, show overlay

Is this right?

Exactly! So basically like the website I linked to. 

Posted
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!)

Posted
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!!

Posted
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! 

Posted
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!)

Posted
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! 

Posted
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!)

Posted

@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

Posted
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!)

Posted

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!)

  • 2 months later...
Posted
On 1/26/2022 at 10:23 AM, Simonhagstrom said:

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

@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! 

  • 8 months later...
Posted
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!)

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.