How to fix to getting automatic flip on hover? - html

I think something is not letting me get flip on hovering over the card.
I have tried .card:hover .front:hover and so many other but it is not working. Sorry been awake for 3 days cant wrap it, and i have the project due in couple of hours. it must be something i have been missing, if i could get some help id appreciate it
<div class="card">
<input type="checkbox" id="card" class="more">
<div class="content">
<div class="front" style="background-image: url()">
<div class="inner">
<h2></h2>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
<span>1</span>
</div>
<div class="info">
<span>2</span>
<div class="info">
<span>3</span>
</div>
<div class="description">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde?</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="type">Card</div>
<div class="button">
<a href='https://www.google.com/'><button>Link To Google</button></a>
</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 300px;
height: 280px;
perspective: 1500px;
}
.card:hover {
transition: rotateY(180deg);
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.5em;
transform: translateZ(80px) scale(0.94);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background: linear-gradient(40deg, rgba(67, 138, 243, 0.7), rgba(255, 242, 166, 0.7));
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .inner {
grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
grid-template-columns: repeat(4, auto);
grid-column-gap: 0.8em;
justify-items: center;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: '';
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.70em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 2em;
line-height: 2.0em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #355cc9;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}

So the fixes are:
you're using card as ID in HTML but in css it was used as class. I have changed HTML to class="card".
Moreover, rotateY(180deg) works with transform property.
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 300px;
height: 280px;
perspective: 1500px;
}
.card:hover {
transition: width 2s, height 4s;
transform: rotateY(180deg);
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.5em;
transform: translateZ(80px) scale(0.94);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background: linear-gradient(40deg, rgba(67, 138, 243, 0.7), rgba(255, 242, 166, 0.7));
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .inner {
grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
grid-template-columns: repeat(4, auto);
grid-column-gap: 0.8em;
justify-items: center;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: '';
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.70em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 2em;
line-height: 2.0em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #355cc9;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}
<div class="card">
<input type="checkbox" class="card" class="more">
<div class="content">
<div class="front">
<div class="inner">
<h2>Hello</h2>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
<span>1</span>
</div>
<div class="info">
<span>2</span>
<div class="info">
<span>3</span>
</div>
<div class="description">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem unde?</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="type">Card</div>
<div class="button">
<a href='https://www.google.com/'><button>Link To Google</button></a>
</div>
</div>
</div>
</div>
Hope this helps!

Related

How to stop animation elements moving on top of other element

I have implemented animation on a list. List should move horizontally on the screen. There is a div element for information i.e. waiting token.
List should not cross that div.
here goes my code:
.list_wrapper__content {
position: absolute;
top: 25%;
left: 0;
height: 5vh;
background-color: #fff;
animation: animate_opp_2 25s linear infinite;
display: flex;
margin-left: 10%;
}
.list_wrapper__content___item {
height: 5vh;
border: 1px solid red;
width: 200px;
margin-right: 1%;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
}
#keyframes animate_opp_2 {
0% {
left: 10;
transform: translate(20%);
}
100% {
left: 0;
transform: translate(-100%);
}
}
.header {
height: 140px;
width: 200px;
border: 1px solid black;
z-index: 3;
position: relative;
}
<div class="list_wrapper">
<div class="header"> Waiting Tokens</div>
<div class="list_wrapper__content">
<div class="list_wrapper__content___item" *ngFor="let item of ListItems">
{{item}}
</div>
</div>
</div>
Stackblitz for the same:
https://stackblitz.com/edit/angular-ivy-pvmjdz?file=src/app/app.component.css
Looks like I am missing something. Any help will be highly appreciated
Replace all list_wrapper__content___item with
<div class="list_wrapper__content___item" *ngFor="let item of ListItems">
{{item}}
</div>
.list_wrapper {
height: 60px;
display: flex;
background-color: grey;
overflow:hidden;
}
.header {
text-transform: uppercase;
min-width: 100px;
font-weight: bold;
border-right: 1px solid black;
display: flex;
align-items: center;
text-align: center;
background-color: white;
z-index:1
}
.list_wrapper__content {
animation: animate_opp_2 25s linear infinite;
display: flex;
align-items: center;
}
.list_wrapper__content___item {
height: 30px;
border: 1px solid red;
width: 200px;
margin-right: 1%;
border-radius: 2px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#keyframes animate_opp_2 {
0% {
left: 10;
transform: translate(20%);
}
100% {
left: 0;
transform: translate(-100%);
}
}
<div class="list_wrapper">
<div class="header"> Waiting Tokens</div>
<div class="list_wrapper__content">
<div class="list_wrapper__content___item">
1000
</div>
<div class="list_wrapper__content___item">
1001
</div>
<div class="list_wrapper__content___item">
1002
</div>
<div class="list_wrapper__content___item">
1003
</div>
<div class="list_wrapper__content___item">
1004
</div>
<div class="list_wrapper__content___item">
1005
</div>
<div class="list_wrapper__content___item">
1006
</div>
</div>
</div
you put an animation on your wrapper div, if you want to stop the animation right before
<div class="header"> Waiting Tokens</div>
you should put your animation on .list_wrapper__content___item
i slightly modified your css
.list_wrapper {
padding: 2rem;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.list_wrapper__content {
/* position: absolute; */
left: 0;
height: 250px;
background-color: #fff;
display: flex;
/* margin-left: 10%; */
position: relative;
overflow: hidden;
}
.list_wrapper__content___item {
height: 5vh;
border: 1px solid red;
width: 200px;
margin-right: 1%;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: inline-flex;
justify-content: center;
animation: animate_opp_2 5s linear infinite;
}
working example:
https://angular-ivy-5egh19.stackblitz.io

jQuery modal not setting horizontally middle

I have a simple jQuery modal. It works well, but I can't set it horizontally middle. I've tried many approach, but it not centering anyway. It creates problem when I want to use "max-width: 400". It create problem and go on one side. I want to make it like bootstrap modal. Max-width: 400 and will be centered horizontally also. Please look at my code.
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.mi-modal {
position: fixed;
z-index: 10000; /* 1 */
top: 0;
left: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
padding: 10%;
width: 80%; /* 94% + 3% +3% = 100% */
max-width: 400px;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
margin: auto auto !important;
}
.mi-modal-transition {
transition: all 0.4s;
transform: translateY(-10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translateY(0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center; /* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Instead of wrestling with margin and padding for centering, just use the standard left position and -50% x-axis translation.
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
html,
body {
margin: 0;
padding: 0;
}
.mi-modal {
position: fixed;
z-index: 10000;
top: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
width: 100%;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
max-width: 400px;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
left: 50%;
transform: translateX(-50%);
}
.mi-modal-transition {
transition: all 0.4s;
transform: translate(-50%, -10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translate(-50%, 0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
/* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
For center alignment of modal add the following css code
.mi-modal.modal-visible {
margin: auto;
inset: 0;
}
.mi-modal-wrapper.mi-modal-transition {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.mi-modal {
position: fixed;
z-index: 10000; /* 1 */
top: 0;
left: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
padding: 10%;
width: 80%; /* 94% + 3% +3% = 100% */
max-width: 400px;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
margin: auto auto !important;
}
.mi-modal-transition {
transition: all 0.4s;
transform: translateY(-10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translateY(0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center; /* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
.mi-modal.modal-visible {
margin: auto;
inset: 0;
}
.mi-modal-wrapper.mi-modal-transition {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Distorted Container on Tablet and Mobile Version

I just can't get it to work so that the images of the planets and the text within the Glassmorphism don't get distorted on tablet and mobile view and completely break the image. I am a complete novice who has thrown together a few code snippets and try to do it by my own. Please help me adjust the code so that it works.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.container {
max-width: 500px;
width: 100%;
padding: 0 4%;
padding-top: 65px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 100%;
height: 250px;
position: relative;
}
.card {
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
position: absolute;
box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
img {
width: 60%;
position: absolute;
right: 290px;
bottom: -100px;
}
.shape {
width: 80%;
position: absolute;
right: -150px;
bottom: 50px;
}
.text-container {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 65%;
height: 100%;
left: 40px;
top: 0;
bottom: 0;
}
.text-container h2 {
margin-bottom: 2px;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 50px;
letter-spacing: 3px;
}
.text-container p {
font-size: 18px;
color: #d5d5d5;
font-family: "bergen mono";
font-weight: 300;
letter-spacing: -1px;
line-height: 20px;
text-align: justify;
}
a {
display: block;
width: 100%;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
margin-top: 50px;
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
border-radius: 5px;
text-decoration: none;
text-align: center;
padding: 15px 0;
box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.06);
}
a > .fab {
font-size: 20px;
color: #000;
}
<div class="container">
<div class="wrapper">
<img src= "https://mathias-mastert-podcasts.com/wp-content/uploads/2022/05/simon-lee-XnGxTBij48Q-unsplash.png">
<img class="shape" src="https://mathias-mastert-podcasts.com/wp-content/uploads/2022/05/simon-lee-ozVwowRmSwM-unsplash.png" alt="">
<div class="card">
<div class="text-container">
<h2>STORE</h2>
<p> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, LoremLorem ipsum dolor sit ametipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>

How to prevent absolutely positioned img from moving

So I have a flexbox with some elements and over the flexbox, I want to put a foreground which should be absolutely positioned. What I am trying to achieve is, that with window resize, the foreground will change its size but not its position. Currently, when the window is small, the image is moving up.
main div.heroBoxContainer {
display: flex;
display: -ms-flexbox;
height: inherit;
margin: 0 auto;
max-width: 1280px;
padding: 0;
position: relative;
z-index: 4;
align-items: center;
}
main div.heroBoxContainer .hGroup {
color: white;
display: block;
height: auto;
margin: 0 0 0 0;
width: 100%;
z-index: 5;
}
div.heroBoxContainer h1.heroHeadline,
div.heroBoxContainer h1.heroHeadline {
font-size: 2rem;
font-weight: 400;
line-height: 2.5rem;
margin: 0 0 0 10rem;
transform: skew(-6deg) rotate(-6deg);
}
div.heroBoxContainer p.subHeadline {
font-size: 4rem;
font-weight: bolder;
margin: 0rem 0 0 10rem;
transform: skew(-6deg) rotate(-6deg);
}
div.heroBoxContainer p.priceHeadline {
font-size: 4rem;
font-weight: bolder;
margin: 0rem 0 8rem 10rem;
color: rgba(255, 220, 58, 1);
transform: skew(-6deg) rotate(-6deg);
}
div img.heroForeground {
position: absolute;
top: 8vh;
right: 0;
max-width: 80%;
z-index: 2;
left: 15vw;
}
#carousel {
overflow: hidden;
white-space: nowrap;
width: 100vw;
height: 75vh;
position: relative;
}
.slide-image {
width: 100vw;
height: 75vh;
background-position: center;
display: inline-block;
background-size: cover;
position: relative;
}
<section id="carousel">
<div class="slide-image" id="slide1">
<div class="heroBoxContainer">
<img src="https://www.cheopstech.cz/wp-content/uploads/2017/06/placeholder-3.png" class="heroForeground">
<div class="hGroup">
<h1 class="heroHeadline">LOREM IPSUM<br> DOLOR SIT AMET</h1>
<p class="subHeadline">LOREM IPSUM:</p>
<p class="priceHeadline">LOREM IPSUM</p>
LOREM IPSUM
</div>
</div>
</div>
</section>
Your absolutely positioned img.heroForeground has it's top set to 8vh which will change as the window size changes during resize. This is leading to the unwanted shifting during window resize. Instead, center the element using transform/translate.
div img.heroForeground {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
…
}
Demo
main div.heroBoxContainer {
display: flex;
display: -ms-flexbox;
height: inherit;
margin: 0 auto;
max-width: 1280px;
padding: 0;
position: relative;
z-index: 4;
align-items: center;
}
main div.heroBoxContainer .hGroup {
color: white;
display: block;
height: auto;
margin: 0 0 0 0;
width: 100%;
z-index: 5;
}
div.heroBoxContainer h1.heroHeadline,
div.heroBoxContainer h1.heroHeadline {
font-size: 2rem;
font-weight: 400;
line-height: 2.5rem;
margin: 0 0 0 10rem;
transform: skew(-6deg) rotate(-6deg);
}
div.heroBoxContainer p.subHeadline {
font-size: 4rem;
font-weight: bolder;
margin: 0rem 0 0 10rem;
transform: skew(-6deg) rotate(-6deg);
}
div.heroBoxContainer p.priceHeadline {
font-size: 4rem;
font-weight: bolder;
margin: 0rem 0 8rem 10rem;
color: rgba(255, 220, 58, 1);
transform: skew(-6deg) rotate(-6deg);
}
div img.heroForeground {
position: absolute;
max-width: 80%;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#carousel {
overflow: hidden;
white-space: nowrap;
width: 100vw;
height: 75vh;
position: relative;
}
.slide-image {
width: 100vw;
height: 75vh;
background-position: center;
display: inline-block;
background-size: cover;
position: relative;
}
<section id="carousel">
<div class="slide-image" id="slide1">
<div class="heroBoxContainer">
<img src="https://www.cheopstech.cz/wp-content/uploads/2017/06/placeholder-3.png" class="heroForeground">
<div class="hGroup">
<h1 class="heroHeadline">LOREM IPSUM<br> DOLOR SIT AMET</h1>
<p class="subHeadline">LOREM IPSUM:</p>
<p class="priceHeadline">LOREM IPSUM</p>
LOREM IPSUM
</div>
</div>
</div>
</section>
jsFiddle

Display rectangular image in quare from the center using CSS [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I had this piece of css/html code that shows 9 pictures. Some of the pictures might be rectangular, and i want them to be displayed in squares like other pictures. What css rules do i need to adjust? The structure of html is in the picture, so is the current css rules.
I had this piece of css/html code that shows 9 pictures. Some of the pictures might be rectangular, and i want them to be displayed in squares like other pictures. What css rules do i need to adjust? The structure of html is in the picture, so is the current css rules.
I had this piece of css/html code that shows 9 pictures. Some of the pictures might be rectangular, and i want them to be displayed in squares like other pictures. What css rules do i need to adjust? The structure of html is in the picture, so is the current css rules.
The code is attached below
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper::-webkit-scrollbar {
display: none;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper .img::after {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(88, 81, 219, 0.25), transparent);
}
.content-wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper::after, .user-social-wrapper::before {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 1px;
}
.user-social-wrapper::before {
top: initial;
bottom: 0;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot::after {
content: "";
display: block;
opacity: 0;
transition: all 0.255s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
#keyframes drift {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c2daebf39514481b7bdd696df185794a/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c079f9938e0004cd465e9b3a23823638/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/4c03bcf4125a52da4db64348fded2e64/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/2ddf693641bf3e4dad7f0e4113196ed3/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/293669652704407f1519034a237110fc/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/0a8c6666eeaace1c7eff30c25aa672c6/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/7841eff64f571f60c9ec1d169158851e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/a78a72efb59d50ceeae8e6bcbaa82f92/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/77a032f68b948ae7049ea644777fc393/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,963</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>
<script src="js/index.js"></script>
</div>
The following styles are enough to make your images fit:
.content-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
Don't forget to set height and width to 100%.
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper::-webkit-scrollbar {
display: none;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper .img::after {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(88, 81, 219, 0.25), transparent);
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper::after, .user-social-wrapper::before {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 1px;
}
.user-social-wrapper::before {
top: initial;
bottom: 0;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot::after {
content: "";
display: block;
opacity: 0;
transition: all 0.255s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
#keyframes drift {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c2daebf39514481b7bdd696df185794a/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c079f9938e0004cd465e9b3a23823638/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/4c03bcf4125a52da4db64348fded2e64/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/2ddf693641bf3e4dad7f0e4113196ed3/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/293669652704407f1519034a237110fc/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/0a8c6666eeaace1c7eff30c25aa672c6/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/7841eff64f571f60c9ec1d169158851e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/a78a72efb59d50ceeae8e6bcbaa82f92/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/77a032f68b948ae7049ea644777fc393/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,963</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>
<script src="js/index.js"></script>
</div>
object-fit: contain;
to
object-fit: cover;