Site URL: http://dragonfly-drum-g8n7.squarespace.com
hello! I am trying to get the title of the blog posts to appear on hover when I include a summary block on a landing page. I found a tutorial and copied the code however the title doesnt appear only on hover, it is fixed there.
this is my code:
@media screen and (min-width:800px) {#block-yui_3_17_2_1_1633664426986_16015 {
.summary-item {
position: relative;
img {
transition: all .5s ease!important;
}
.summary-content {
position: absolute;
color: #fff!important;
top: 50%;
left: 50%;
opacity: 0;
pointer-events: none;
transition: all .5s ease;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt {
color: #FEFCE3!important;
font-family: Libre Baskerville;
font-size: 13px
}
}
.summary-item:hover {
img {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
.summary-content {
opacity: 1;
}
}
}}
I have also attached a screenshot.
This is my first time posting for help so I hope I am doing the right thing!
I have a password on my website but not sure if i should paste that on here or not!
thank you!