Bootstrap grid alignment not working

Bootstrap grid alignment not working - css

I have a set of three "cards" (but not using the bootstrap card class) that I need to align horizontally and center on the page. I am setting the outer div to a full width, and trying to give each of the three .info-card classes equal .col-lg-4 width. This is still keeping the cards floated left(removing the left float from the .flip-card class aligns the cards vertically. How can I get the columns applied correctly here?
<div class="container">
<div class="flip-cards col-lg-12">
<div class="info-card col-lg-4">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
<div class="info-card col-lg-4">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
<div class="info-card col-lg-4">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
</div>
CSS
.container{
background-color: #eee;
}
.flip-cards .info-card {
float: left;
margin: 2% 1% 0% 1%;
padding: 5% 0% 5% 0%;
position: relative;
-webkit-perspective: 600px;
}
.flip-cards .info-card:hover .back {
-webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
-webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
transition: -webkit-transform 1s;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
background-color: #fff;
overflow: hidden;
width: 200px;
height: 170px;
position: absolute;
opacity: .5;
}
.flip-cards .info-card .front h3 {
text-decoration: underline;
padding: 10px;
text-align: left;
color: #6633cc;
}
.flip-cards .info-card .back {
background-color: #6633cc;
width: 200px;
height: 170px;
-webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
color: #fff;
padding: 7px 0px 0px 10px;
font-size: 10px;
}
.flip-cards .info-card .back h6 {
font-weight: 400;
color: #fff;
position: absolute;
text-align: left;
padding: 0px 10px 10px 10px;
bottom: 0;
}
.flip-cards .info-card .back h6 a {
color: #fff;
text-decoration: underline;
}
#media (max-width: 400) {
.flip-cards {
margin-left: -3%;
}
.card-outer-wrapper {
height: 260px;
margin-bottom: 40px;
max-width: 100vw;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.card-outer-wrapper .card-wrapper {
overflow-x: scroll;
width: 200%;
}
}
JSFIDDLE: https://jsfiddle.net/sxLodk6r/

Let's redo it again.
This time I'll list all code which need to be fixed, and at last I'll paste all final html and css code for your convenient.
Add grid below <div class="row"> in bootstrap.
<div class="container">
<div class="row"> <!-- Add This -->
<div class="flip-cards col-lg-12 ">
...
</div>
</div> <!-- Add This -->
</div>
Don't add any class which contain padding and margin with grid class in the same level.
<div class="col-lg-4">
<div class="info-card "> <!-- Separate this class -->
...
</div>
</div>
It would be better to avoid percent value in margin/padding top/bottom and it is easier for you to define the position of .back later in list 7.
.flip-cards .info-card {
margin: 20px 10px 0 10px;
padding: 10px 0 10px 0;
}
If you want to align .info-card center, replace float:left with display:inline-block in .info-card and add .text-center with .col-lg-4
.flip-cards .info-card {
display: inline-block;
float: left; /* Remove This! */
}
<div class="col-lg-4 text-center">
<div class="info-card ">
...
</div>
</div>
Don't use overflow:hidden in .front, instead, remove the margin-top in h3.
.flip-cards .info-card .front { {
overflow: hidden; /* Remove This */
}
.flip-cards .info-card .front h3 {
margin-top: 0px;
}
</div>
Remove positon:absolute in .front.
.flip-cards .info-card .front {
position: absolute; /* Remove This! */
}
Add position:absolute and top:10px in .back.
.flip-cards .info-card .back {
background-color: #6633cc;
width: 200px;
height: 170px;
position: absolute;
top:10px;
-webkit-transform: rotateY(-180deg);
}
My Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="flip-cards col-lg-12 ">
<div class="col-lg-4 text-center">
<div class="info-card ">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="info-card ">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="info-card ">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My Css code
.container{
background-color: #eee;
}
.flip-cards .info-card {
display: inline-block;
margin: 20px 10px 0 10px;
padding: 10px 0 10px 0;
position: relative;
-webkit-perspective: 600px;
}
.flip-cards .info-card:hover .back {
-webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
-webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
transition: -webkit-transform 1s;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
background-color: #fff;
width: 200px;
height: 170px;
opacity: .5;
}
.flip-cards .info-card .front h3 {
text-decoration: underline;
padding: 10px;
text-align: left;
color: #6633cc;
margin-top: 0px;
}
.flip-cards .info-card .back {
background-color: #6633cc;
width: 200px;
height: 170px;
position: absolute;
top:10px;
-webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
color: #fff;
padding: 7px 0px 0px 10px;
font-size: 10px;
}
.flip-cards .info-card .back h6 {
font-weight: 400;
color: #fff;
position: absolute;
text-align: left;
padding: 0px 10px 10px 10px;
bottom: 0;
}
.flip-cards .info-card .back h6 a {
color: #fff;
text-decoration: underline;
}
#media (max-width: 400) {
.flip-cards {
margin-left: -3%;
}
.card-outer-wrapper {
height: 260px;
margin-bottom: 40px;
max-width: 100vw;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.card-outer-wrapper .card-wrapper {
overflow-x: scroll;
width: 200%;
}
}

Related

CSS - Incorrect overlpapping - 3D Perspective

I'm experimenting with CSS perspective to flip cards with a 3D effect, however when the right-most cards flip they are incorrectly overlapping. I have attempted to use Z-Index (which I am aware requires a positioning of anything but "static") however this has had no effect. Any help would be greatful. The project is in the following CodePen:
https://codepen.io/mikrayall/pen/WNzBxEw
HTML:
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Once there was a dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>STORY</h2></div>
<div class="cardBack"><p>A dog and a frog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents3">
<div class="cardFront"><h2>ABOUT</h2></div>
<div class="cardBack"><p>The frog sat on the dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Like the dog was a log...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>DOG</h2></div>
<div class="cardBack"><p>The dog ate the frog...!</p></div>
</div>
</div>
CSS:
*, *::before, *::after{
margin: 0;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items: center;
font-family: 'calibri';
perspective:700px;
background-image: linear-gradient(180deg, #000, #666)
}
.card{
margin: auto 10px;
width:6em;
border: 1px solid white;
border-radius:0.3em;
perspective: 700px;
transform: rotateX(45deg);
transform-style: preserve-3d;
transform-origin:bottom;
}
#cardContents{
position: relative;
width: 6em;
height: 8em;
border-radius:0.3em;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
transform-origin:bottom;
}
.cardFront, .cardBack{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0.3em;
backface-visibility: hidden;
transform-style: preserve-3d;
display:grid;
align-content: center;
}
.cardFront{
background-color: pink;
border:0.2em solid white;
}
.cardBack{
transform: rotateY(180deg);
background: lightblue;
border:0.2em solid white;
}
.card:hover #cardContents{
transform: rotateX(-37deg) translateZ(100px) rotateY(180deg) translateY(-40px);
}
I've attempted to apply Z-Index to the various elements (.cardBack, .cardFront, .cardContents).
Any help gatefully appreciated. Thank you.

add z-index to the hovered card only
.card:hover {
z-index:1;
}
Full code
*, *::before, *::after{
margin: 0;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items: center;
font-family: 'calibri';
perspective:700px;
background-image: linear-gradient(180deg, #000, #666)
}
.card{
margin: auto 10px;
width:6em;
border: 1px solid white;
border-radius:0.3em;
perspective: 700px;
transform: rotateX(45deg);
transform-style: preserve-3d;
transform-origin:bottom;
}
#cardContents{
position: relative;
width: 6em;
height: 8em;
border-radius:0.3em;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
transform-origin:bottom;
}
.cardFront, .cardBack{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0.3em;
backface-visibility: hidden;
transform-style: preserve-3d;
display:grid;
align-content: center;
}
.cardFront{
background-color: pink;
border:0.2em solid white;
}
.cardBack{
transform: rotateY(180deg);
background: lightblue;
border:0.2em solid white;
}
.card:hover {
z-index:1;
}
.card:hover #cardContents{
transform: rotateX(-37deg) translateZ(100px) rotateY(180deg) translateY(-40px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Once there was a dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>STORY</h2></div>
<div class="cardBack"><p>A dog and a frog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents3">
<div class="cardFront"><h2>ABOUT</h2></div>
<div class="cardBack"><p>The frog sat on the dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Like the dog was a log...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>DOG</h2></div>
<div class="cardBack"><p>The dog ate the frog...!</p></div>
</div>
</div>
</body>
</html>

How to have 3 #keyframes fill's on the same page?

I am trying to get three keyframes to work independently from each other
I have added some HTML and CSS on a friends codepen account to show you.
https://codepen.io/williamharvey/pen/JjJjRdz
I have three circular dials that have the following.
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(45deg);
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
But I want the second dial to be 65deg
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(65deg);
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(65deg);
}
}
and the third 95deg
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(95deg);
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(95deg);
}
}
Is this even possible?
Thanks in advance.

short answser: Yes.
You can use the forwards (keyword) to freeze your animation on its ending value, and CSS var() to apply specific values from different elements but from a single rule :
example from your code :
.circle-wrap {
margin: 50px auto;
width: 240px;
height: 240px;
background: #e5e5e5;
border-radius: 50%;
transform: rotate(-125deg);
}
.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
width: 240px;
height: 240px;
position: absolute;
border-radius: 50%;
}
.circle-wrap .circle .mask {
clip: rect(0px, 240px, 240px, 120px);
}
.circle-wrap .circle .mask .fill {
clip: rect(0px, 120px, 240px, 0px);
background-color: #ffe100;
}
.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s forwards;
}
#keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate( var(--rt));
}
}
.circle-wrap .inside-circle {
width: 185px;
height: 185px;
border-radius: 50%;
background: #fff;
line-height: 185px;
text-align: center;
top: 28px;
left: 28px;
z-index: 100;
font-weight: 700;
font-size: 6.5rem;
letter-spacing: -4px;
transform: rotate(114deg);
font-style: italic;
font-family: brandon-grotesque;
padding: 0;
position: relative;
}
.circle-wrap .inside-circle span {
font-size: 2.5rem;
letter-spacing: 0;
}
.circle-wrap .inside-circle .cone {
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-top: 125px solid white;
border-radius: 50%;
transform: rotate(192deg);
position: absolute;
bottom: -33px;
left: -96px;
z-index: -1;
}
.circle-wrap .inside-circle .cone .dial-speeds {
transform: rotate(179deg);
position: relative;
z-index: 1;
font-weight: 400;
font-style: normal;
}
.circle-wrap .inside-circle .cone .dial-speeds .left {
position: absolute;
bottom: -78px;
width: 18px;
height: 20px;
left: -50px;
}
.circle-wrap .inside-circle .cone .dial-speeds .right {
position: absolute;
bottom: -78px;
width: 18px;
height: 20px;
right: -50px;
}
.circle-wrap .inside-circle .cone .dial-speeds .right span {
right: -16px;
top: -58px;
position: absolute;
font-size: 15px;
}
.circle-wrap .inside-circle .cone .dial-speeds .left span {
left: -16px;
top: -58px;
position: absolute;
font-size: 15px;
}
<div class="grid gap-4 grid-cols-3 text-left pt-24">
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill fill"></div>
</div>
<div class="mask half">
<div class="fill fill" style="--rt:45deg"></div>
</div>
<div class="inside-circle">
300<span></span>
<div class="cone">
<div class="dial-speeds">
<div class="left">
<img src="">
<span>300</span>
</div>
<div class="right">
<img src="">
<span>100</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill" style="--rt:60deg"></div>
</div>
<div class="inside-circle">
500<span></span>
<div class="cone">
<div class="dial-speeds">
<div class="left">
<img src="">
<span>500</span>
</div>
<div class="right">
<img src="">
<span>200</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill" style="--rt:95deg"></div>
</div>
<div class="mask half">
<div class="fill"></div>
</div>
<div class="inside-circle">
900<span></span>
<div class="cone">
<div class="dial-speeds">
<div class="left">
<img src="">
<span>900</span>
</div>
<div class="right">
<img src="">
<span>300</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ressources :
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode look at forwards
https://developer.mozilla.org/en-US/docs/Web/CSS/var()

Border Radius Error only on Safari Browser

I am trying to make a node that can zoom its picture when hovered upon. Everything works fine on Chrome and Mozilla. However, for some reason Safari gets buggy every time the image is on hover. The border radius disappears when hovered into a sharp edge and reappears when un-hovered. Here is an example: FIDDLE
.img-zoom {
top: 0;
left: 0;
margin: 0;
display: block;
width: 100%;
height: 60%;
position: relative;
overflow: hidden;
}
.img-zoom img {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
transition: all 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.blogDesc {
background-color: whitesmoke;
width: 100%;
height: 40%;
}
.blogContent {
width: 200px;
height: 200px;
word-wrap: break-word;
border-radius:25px;
overflow: hidden;
display:inline-block;
margin:10px;
}
.blogTitle {
font-weight: bold;
font-family: "Courier New";
text-align: center;
padding: 10px;
}
.blogText {
-webkit-column-width: 150px;
column-width: 150px;
height: 100%;
margin-left: 10px;
margin-right: 10px;
}
.blogAlign{
text-align:center;
}
<section class="blogAlign">
<div class="blogContent">
<div class="img-zoom"><img src="https://kbob.github.io/images/sample-3.jpg" alt="" title=""></div>
<div class="blogDesc">
<div class="blogTitle">
My Multimedia Agency Tool
</div>
<div class="blogText">
BBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLAB
</div>
</div>
</div>
<div class="blogContent">
<div class="img-zoom"><img src="https://kbob.github.io/images/sample-3.jpg" alt="" title=""></div>
<div class="blogDesc">
<div class="blogTitle">
My Multimedia Agency Tool
</div>
<div class="blogText">
BBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLAB
</div>
</div>
</div>
<div class="blogContent">
<div class="img-zoom"><img src="https://kbob.github.io/images/sample-3.jpg" alt="" title="" class="picturez"></div>
<div class="blogDesc">
<div class="blogTitle">
My Multimedia Agency Tool
</div>
<div class="blogText">
BBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLABBBLALBLABLALBALBLBALBALBALBLABLABLABLABLABLALBLABLABLABLALBALBLABLABLABLABLALBLAB
</div>
</div>
</div>
</section>
Does anyone know how to fix this? Thanks in advance.

<div class="activity_rounded"><img src="http://placehold.it/100" /></div>
.activity_rounded {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
}
.activity_rounded img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
vertical-align: middle;
}
it should work properly.

Evenly distribute scaled items?

How can I modify the styles below to result in the elements having the same spacing between each after the scaling? (without absolutely positioning them)
Desired Result:
.menu-next, .menu-previous1 {
transform: scale(.9); transform-origin: left;
}
.menu-previous2 { transform: scale(.7); transform-origin: left;}
.menu-previous3 { transform: scale(.55); transform-origin: left;}
.menu {
background-color: gray;
padding: 10px;
}
.menu div {
display: block;
width: 20%;
padding: 10px;
background-color: white;
color: green;
}
<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current" >Settings</div>
<div class="menu-next" >Other</div>
</div>

Use scale(x, y) and not scale(value) + transform-origin
.menu-next,
.menu-previous1 {
transform: scale(.9, 1);
transform-origin: left;
}
.menu-previous2 {
transform: scale(.7, 1);
transform-origin: left;
}
.menu-previous3 {
transform: scale(.55, 1);
transform-origin: left;
}
.menu {
display: flex;
flex-direction: column;
justify-content: center;
background-color: gray;
padding: 10px;
}
.menu div {
display: block;
width: 20%;
padding: 10px;
background-color: white;
border: 1px solid green;
color: green;
}
<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current">Settings</div>
<div class="menu-next">Other</div>
</div>
With thatthere is an other problem : scalling text. But you can fix that with pseudo-element (like here)

The best way is to wrap the scaling items and apply the other ui properties seperately of items to that wrapping div and then apply the scaling to the item inside it only.
Here is your code with this theory applied and a little change of padding and margin for equal spacing:
.itemwrapper .menu-next, .itemwrapper .menu-previous1 {
transform: scale(.9); transform-origin: left;
}
.itemwrapper .menu-previous2 { transform: scale(.7); transform-origin: left;}
.itemwrapper .menu-previous3 { transform: scale(.55); transform-origin: left;}
.menu {
background-color: gray;
padding: 10px;
}
.itemwrapper{
display: block;
width: 20%;
padding: 5px 10px;
margin:2px;
background-color: white;
color: green;
}
<div class="menu">
<div class="itemwrapper"><div class="menu-previous3">Items</div></div>
<div class="itemwrapper"><div class="menu-previous2">Store</div></div>
<div class="itemwrapper"><div class="menu-previous1">Friends</div></div>
<div class="itemwrapper"><div class="menu-current" >Settings</div></div>
<div class="itemwrapper"><div class="menu-next" >Other</div></div>
</div>
Hope this helps.

May be you can adjust it by hand ... Not really a good solution, but it is difficult to go any better.
.menu-next,
.menu-previous1 {
transform: scale(.9);
}
.menu-previous2 {
transform: scale(.7);
margin-bottom: -6px;
}
.menu-previous3 {
transform: scale(.55);
margin-bottom: -12px;
}
.menu {
background-color: gray;
padding: 10px;
}
.menu div {
display: block;
width: 20%;
padding: 10px;
background-color: white;
color: green;
transform-origin: left;
}
<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current">Settings</div>
<div class="menu-next">Other</div>
</div>

Based a bit off this answer and sort of hack-y: https://stackoverflow.com/a/16388428/1204415
Wrap your scaled divs, resize the wrappers, and move the scaled divs with negative margins within the wrappers. scale() seems to also scale borders, margins, and padding.
HTML
<div class="menu">
<div class="wrap1">
<div class="item menu-previous3">Items</div>
</div>
<div class="wrap2">
<div class="item menu-previous2">Store</div>
</div>
<div class="item menu-previous1">Friends</div>
<div class="item menu-current" >Settings</div>
<div class="item menu-next" >Other</div>
</div>
CSS
.wrap1 {
height: 20px;
margin: 0;
overflow: hidden;
background-color: black;
}
.wrap2 {
height: 32px;
margin: -5px 0 0 0;
overflow: hidden;
background-color: blue;
}
.menu-next, .menu-previous1 {
transform: scale(.9); transform-origin: left;
}
.menu-previous2 { transform: scale(.7); transform-origin: left;}
.menu-previous3 { transform: scale(.55); transform-origin: left; margin: -8px 0 0 0; }
.menu {
background-color: gray;
padding: 10px;
}
.menu .item {
display: block;
outline:1px solid red;
width: 20%;
padding: 10px;
background-color: white;
color: green;
}
A pen: https://codepen.io/dmoz/pen/vmjybo

Animated images on WordPress

I want these images above to pop up when someone hovers over them, each image pops up and comes to the center when someone hovers a mouse over the image, also they should be arranged in that format. I want to do this in WordPress, I am designing a website and the client wants that effect. Is it possible friends? please someone assist me.

HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<nav>
<img src="http://winn-brown.co.uk/wp-content/uploads/2016/06/Logo-new.png" id="logo">
</nav>
<div class="wrapper">
<div class="parent" onclick="">
<div class="child bg-one">
Los Angeles
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-two">
London
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-three">
New York
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-four">
Hollywood
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-five">
Dubai
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-six">
San Francisco
</div>
</div>
</div>
CSS Code
/* Global Styling */
html, body {margin:0px; padding: 0px;}
nav {
background-color: #34495e;
height: 80px;
position: fixed;
width: 100vw;
top: 0;
z-index: 999;
}
#logo {height: 80px; margin-left: 20px;}
.wrapper {
padding: 50px 50px;
max-width: 1200px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
.right {float: right !important;}
/* Image zoom on hover + Overlay colour */
.parent {
width: 45%;
margin: 20px;
height: 300px;
border: 1px solid blue;
overflow: hidden;
position: relative;
float: left;
display: inline-block;
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
/* Several different images */
.bg-one {background-image: url(https://media.timeout.com/images/101602611/image.jpg);}
.bg-two {background-image: url(http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg);}
.bg-three {background-image: url(https://media.timeout.com/images/101484105/image.jpg);}
.bg-four {background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/1280px-Hollywood_Sign.jpg);}
.bg-five {background-image: url(http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc);}
.bg-six {background-image: url(http://blog.whitepages.com/wp-content/uploads/2015/04/san-franc.jpg);}
a {
display: none;
font-size: 35px;
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
/*text-decoration: none;*/
}
.parent:hover .child, .parent:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent:hover .child:before, .parent:focus .child:before {
display: block;
}
.parent:hover a, .parent:focus a {
display: block;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52,73,94,0.75);
}
/* Media Queries */
#media screen and (max-width: 960px) {
.parent {width: 100%; margin: 20px 0px}
.wrapper {padding: 20px 20px;}
}
.hello {display: none}
You will try this using that code when you hover the image then it will be zoom out the image. I think it will help you.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Bootstrap grid alignment not working - css

Related

CSS - Incorrect overlpapping - 3D Perspective

How to have 3 #keyframes fill's on the same page?

Border Radius Error only on Safari Browser

Evenly distribute scaled items?

Animated images on WordPress

Categories

Resources