How to apply a transition speed to a scaled image on hover? - css

Question

I have a card in the snippet below. I'm trying to figure out how to apply a transition speed to the scaled image on hover. What I've tried isn't working.
I have an arrow icon at the base of the card with a transition speed applied. It is working fine. I've set the speed of the icon different so you can see the difference.
How do I apply a transition speed to the photo image being scaled on hover? (not the icon)
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4 + img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold, .kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform .2s;
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker, .next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>

Answer 1

Altering the transition on the img does work. But of course we need to make sure we pick the right image.
The scaleable img can be selected and the transition altered in this styling:
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s; /* changed from .2s */
}
Here's the altered snippet that does that:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4+img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold,
.kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s;
/* changed from .2s */
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker,
.next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>
UPDATE: If it is required that the img not only scales but also 'breaks out' of its parent, so that it can all be seen without cropping then make the parent have overflow visible.
Here is the altered snippet:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4+img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold,
.kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card {
overflow: visible;
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s;
/* changed from .2s */
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker,
.next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>