https://marymagdaleneshop.com/password
pass: deawiy
Hey! I’ve just disabled the 2nd image on hover (in the product page) and now I’d like to move the text (price/name of the item) inside the card and show them on hover with a color too as in this page: https://www.olaroche.com/sold
How can I do that? Thank
Hi @MariaMcGraw
May I suggest to update code these steps:
.product-card-wrapper .card, .contains-card--product {
position: relative;
}
.product-card-wrapper .card .card__content , .contains-card--product .card__content {
position: absolute;
top: 0;
background: rgba(170,0,255,.27);
justify-content: center;
align-items: flex-end;
right: 0;
bottom: 0;
opacity: 0;
transition: all .5s;
}
.product-card-wrapper .card:hover .card__content , .contains-card--product:hover .card__content {
opacity: 1;
}
.product-card-wrapper .card-information > .price {
display: flex;
justify-content: center;
}
.collection #product-grid .grid__item {
margin-bottom: 20px;
}
@media(max-width: 749px){
.collection #product-grid .grid__item {
margin-bottom: 15px;
}
}
Hi @MariaMcGraw
Please go to Online Store > Themes > Edit Code, find the base.css file and add the following code to the bottom:
.card.card--standard.card--media {
position: relative;
}
.card__content:has(.card__heading.h5){
display: none;
position: absolute;
bottom: 80px;
padding-left: 110px; // change this to move the text
height: 500px;
padding-top: 400px; // change this to move the text
}
.card.card--standard.card--media .card__inner.color-background-2.gradient.ratio {
background-color: antiquewhite; //change hover color here
}
.card.card--standard.card--media:hover .card__content:has(.card__heading.h5) {
display: initial;
}
I hope that this will help you solve the issue.
That’s perfect! The only problem is that the name would stay on black. I’ve tried to change it in the code but affect only the color of the price and not the name of the item!! How can I change that?
Hi @MariaMcGraw
May I suggest to update code these steps:
.product-card-wrapper .card-information .card__heading a {
color: #fff;
text-decoration:none!important;
}
Not working actually!
Hi @MariaMcGraw
I saw you put code in @media(max-width: 749px). You should move out it.
It should be like code below
@media(max-width: 749px){
.collection #product-grid .grid__item {
margin-bottom: 15px;
}
}
.product-card-wrapper .card-information .card__heading a {
color: #ffffff;
text-decoration:none!important;
}
/*PRICE ON HOVER//COLOR FINE*/
