Gallery "click on image"

Site URL: https://www.robertdeanarchitects.com/about

I have custom code on team gallery section and I added last image 'we are hiring" with CTA "click here for details" looks like link is not responding to the URL added, can I change anything on this code to make the image clickable? https://www.robertdeanarchitects.com/about

https://static1.squarespace.com/static/5f6e689c2d5dea39910d0158/t/5fc557a3eaf37e3b644e5ef6/1606768548051/RDA_weblogo_rda_logo_full_color_rgb.png
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
/* footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-4 {
    width: 40%;
}
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-8 {
    width: 60%;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-96bcdd020e2048e1d369 {
    padding-right: 0;
}
}

Thank you in Advance!

@tuanphan

37 minutes ago, gagica said:

Site URL: https://www.robertdeanarchitects.com/about

I have custom code on team gallery section and I added last image 'we are hiring" with CTA "click here for details" looks like link is not responding to the URL added, can I change anything on this code to make the image clickable? https://www.robertdeanarchitects.com/about

 

https://static1.squarespace.com/static/5f6e689c2d5dea39910d0158/t/5fc557a3eaf37e3b644e5ef6/1606768548051/RDA_weblogo_rda_logo_full_color_rgb.png
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
/* footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-4 {
    width: 40%;
}
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-8 {
    width: 60%;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-96bcdd020e2048e1d369 {
    padding-right: 0;
}
}

 

Thank you in Advance!

@tuanphan

You can hide the overlay on the clickthrough enabled item

.has-clickthrough .gallery-grid-item-wrapper:after {
    background: #72649E;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

32 minutes ago, bangank36 said:

You can hide the overlay on the clickthrough enabled item

.has-clickthrough .gallery-grid-item-wrapper:after {
    background: #72649E;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

 

Im sorry im not sure I understand,  add this code you wrote if so where? I just want the last box to be clickable the rest of gallery should not change. Is that possible?

thank you for your fast reply @bangank36

1 hour ago, gagica said:

Im sorry im not sure I understand,  add this code you wrote if so where? I just want the last box to be clickable the rest of gallery should not change. Is that possible?

 

thank you for your fast reply @bangank36

Add it to Design->Custom CSS, it will disable the overlay animation on grid item which has click-through link enable

8 hours ago, bangank36 said:

Add it to Design->Custom CSS, it will disable the overlay animation on grid item which has click-through link enable

Hi @bangank36 I did add it, still not responding im also getting Syntax error line 1 could that be an issue?

here is all the code I have there now:

https://static1.squarespace.com/static/5f6e689c2d5dea39910d0158/t/5fc557a3eaf37e3b644e5ef6/1606768548051/RDA_weblogo_rda_logo_full_color_rgb.png
@media screen and (max-width:767px) 
{
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
/* footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-4 {
    width: 40%;
}
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-8 {
    width: 60%;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-96bcdd020e2048e1d369 {
    padding-right: 0;
}
}
.has-clickthrough .gallery-grid-item-wrapper:after {
    background: #72649E;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

remove this line first

Thank  you @bangank36, it worked like a charm. 🙂 

5 minutes ago, gagica said:

Thank  you @bangank36, it worked like a charm. 🙂 

You rock! 

Here is some more effect that may attract you

https://beyondspace-showcase.squarespace.com/gallery-hovers

This is great thank  you sir. I doing a new site for a client I will definitely use this.