add hovers to blog cards

pull/1/head
parent ff0243a894
commit a804822ec0
  1. 6
      wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/css/gp-style-desktop.css
  2. 123
      wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-full.css

@ -57,10 +57,14 @@
height: 393px; height: 393px;
flex-shrink: 0; flex-shrink: 0;
} }
.home-card__img:hover img{
width: 120%;
height: 120%;
}
.home-card__img img { .home-card__img img {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: all .5s;
object-fit: cover; object-fit: cover;
} }

@ -379,6 +379,7 @@ body {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
z-index: 1; z-index: 1;
overflow: hidden;
} }
.anons-best__card.light { .anons-best__card.light {
@ -393,12 +394,19 @@ body {
width: 100%; width: 100%;
height: 360px; height: 360px;
z-index: -1; z-index: -1;
overflow: hidden;
border-radius: 30px;
}
.anons-best__card:hover .main-img img{
height: 120%;
width: 120%;
} }
.anons-best__card .main-img img { .anons-best__card .main-img img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
max-width: none;
transition: all .5s;
} }
.anons-best__card.light .main-img { .anons-best__card.light .main-img {
@ -537,71 +545,6 @@ body {
} }
/* Anons end */ /* Anons end */
/* Author */
.author {
padding: 111px 0 105px;
}
.author-content {
max-width: 1022px;
margin: 0 auto;
background: #CAFF81;
border-radius: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 35px 42px 35px 209px;
position: relative;
box-shadow: 6px 9px 20px rgba(0, 0, 0, 15%);
}
.author-content__star-1 {
position: absolute;
width: 74px;
top: 18px;
left: -15px;
transform: translateX(-100%);
}
.author-content__star-2 {
position: absolute;
top: 28px;
right: -24px;
transform: translateX(100%);
width: 37px;
}
.author-content__img {
position: absolute;
left: 9px;
top: -43px;
width: 167px;
}
.author-content__img.mb {
display: none;
}
.author-content__title {
color: var(--main_black);
font-size: 36px;
font-weight: bold;
line-height: 40px;
}
.author-content__link {
border-radius: 20px;
background: var(--main_black);
border: 1px solid var(--main_white);
padding: 15px 24px;
font-size: 20px;
font-weight: 600;
line-height: 24px;
color: var(--main_white);
flex-shrink: 0;
}
/* Author end */
/* Editorial */ /* Editorial */
.editorial { .editorial {
padding-bottom: 68px; padding-bottom: 68px;
@ -664,10 +607,16 @@ body {
flex-shrink: 0; flex-shrink: 0;
} }
.editorial-card:hover .main-img img{
width: 120%;
height: 120%;
}
.editorial-card .main-img img { .editorial-card .main-img img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: all .5s;
} }
.editorial-card__content { .editorial-card__content {
@ -1368,49 +1317,7 @@ body {
gap: 20px; gap: 20px;
} }
.author {
padding: 188px 0 36px;
}
.author-content {
padding: 109px 42px 35px;
flex-direction: column;
align-items: flex-start;
}
.author-content__start-1,
.author-content__start-2 {
display: none;
}
.author-content__img {
display: none;
left: 50%;
transform: translateX(-50%);
top: -180px;
width: 235px;
}
.author-content__img.mb {
display: block;
}
.author-content__title {
width: 100%;
font-size: 26px;
line-height: 32px;
margin-bottom: 16px;
}
.author-content__title br {
display: none;
}
.author-content__link {
width: 100%;
text-align: center;
padding: 11px;
}
.editorial { .editorial {
padding-bottom: 36px; padding-bottom: 36px;

Loading…
Cancel
Save