Issue
I am creating a webpage for wishing my friend on her birthday, but I cannot seem to find a solution to my problem.
I have a block element with contains her photo (img) and upon hover it scales and then flips to show the back side which I named as "img-back", I want a sweet text on this img-back but it appears in broken lines instead of remaining confined to boundaries of img-back and appear as a nice paragraph. (you will see the paragraph I am talking about in a div classed as img-back and under that there is <p>
tag)
P.S I am totally new to coding, I just started learning a week or two ago. So bear with me. Thank you :)
h1 {
color: yellow;
}
.background:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background-size: 100% 100%;
background-image: url('https://s3.amaazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/53.jpg');
width: 150%;
height: 150%;
top: -20px;
left: -20px;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
background-repeat: no-repeat;
}
.content {
height: 400px;
width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
color: white;
-webkit-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
vertical-align: middle;
}
.x1 {
width: 200px;
height: 150px;
background-color: #9CB1FF;
left: 0;
top: 0;
position: relative;
line-height: 150px;
}
.img-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transition: transform 0.8s ease;
}
.img1,
.img-back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transition: transform 0.8s ease;
}
.img-back {
transform: rotateY(180deg);
background-color: #FADA5E;
color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.x1:hover .img1 {
transform: scale(1.5);
}
.x1:hover .img-back {
transform: rotateY(0deg);
transform: scale(1.3);
}
.x1 .img1,
.x1 .img-back {
transition: transform 0.8s ease;
}
.x2 {
position: absolute;
height: 250px;
width: 300px;
left: 400px;
top: 0px;
background-color: #FFFFFF;
line-height: 250px;
color: black;
}
.x3 {
position: absolute;
height: 250px;
width: 200px;
left: 0px;
top: 150px;
background-color: #6694FC;
line-height: 250px;
}
.x4 {
position: absolute;
height: 150px;
width: 500px;
left: 200px;
top: 250px;
background-color: #706AF3;
line-height: 150px;
}
.x5 {
position: absolute;
height: 250px;
width: 200px;
left: 200px;
top: 0px;
background-color: #8593E6;
line-height: 250px;
}
.block {
-webkit-animation: scaledown 1s linear;
-moz-animation: scaledown 1s linear;
animation: scaledown 1s linear;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
}
.block:hover {
z-index: 100;
-webkit-animation: scale 1s linear;
-moz-animation: scale 1s linear;
animation: scale 1s linear;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
}
@keyframes scale {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.1);
-webkit-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
}
}
@keyframes scaledown {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.0);
}
}
@keyframes enlarge {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1.6);
}
<body>
<h1>Hello</h1>
<div class="background">
<div class="content">
<div class="block x1">
<img class="img1" src="368574575_6780285248674637_7476604192085275316_n.jpg">
<div class="img-back">
<p>Kheily shookh tab hastin. Tu yak nemat sheeren hasti, Azizam, Yooram, Joonam, Dostam, Khoshgelam.</p>
</div>
</div>
<div class="block x2">I will add image here, and img-back1 with similar effect</div>
<div class="block x3">I will add image here, and img-back2</div>
<div class="block x4">I will add image here, and img-back3</div>
<div class="block x5">I will add image here, and img-back4</div>
</div>
</div>
</body>
I tried to make this text appear as a nice clean unbroken paragraph which appears on img-back upon hovering, however it appears in broken lines spreading on entire length of screen instead of appear as a nice paragraph on the img-back.
I tried creating jsfiddle link: https://jsfiddle.net/fdkeaj7r/1/
Solution
Your line-height
declaration causes the issue. I've commented it out in the demo snippet.
.x1 {
line-height: 150px;
}
h1 {
color: yellow;
}
.background:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background-size: 100% 100%;
background-image: url('https://s3.amaazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/53.jpg');
width: 150%;
height: 150%;
top: -20px;
left: -20px;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
background-repeat: no-repeat;
}
.content {
height: 400px;
width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
color: white;
-webkit-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
vertical-align: middle;
}
.x1 {
width: 200px;
height: 150px;
background-color: #9CB1FF;
left: 0;
top: 0;
position: relative;
/* line-height: 150px; */
}
.img-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transition: transform 0.8s ease;
}
.img1,
.img-back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transition: transform 0.8s ease;
}
.img-back {
transform: rotateY(180deg);
background-color: #FADA5E;
color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.x1:hover .img1 {
transform: scale(1.5);
}
.x1:hover .img-back {
transform: rotateY(0deg);
transform: scale(1.3);
}
.x1 .img1,
.x1 .img-back {
transition: transform 0.8s ease;
}
.x2 {
position: absolute;
height: 250px;
width: 300px;
left: 400px;
top: 0px;
background-color: #FFFFFF;
line-height: 250px;
color: black;
}
.x3 {
position: absolute;
height: 250px;
width: 200px;
left: 0px;
top: 150px;
background-color: #6694FC;
line-height: 250px;
}
.x4 {
position: absolute;
height: 150px;
width: 500px;
left: 200px;
top: 250px;
background-color: #706AF3;
line-height: 150px;
}
.x5 {
position: absolute;
height: 250px;
width: 200px;
left: 200px;
top: 0px;
background-color: #8593E6;
line-height: 250px;
}
.block {
-webkit-animation: scaledown 1s linear;
-moz-animation: scaledown 1s linear;
animation: scaledown 1s linear;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
}
.block:hover {
z-index: 100;
-webkit-animation: scale 1s linear;
-moz-animation: scale 1s linear;
animation: scale 1s linear;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
}
@keyframes scale {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.1);
-webkit-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.1);
}
}
@keyframes scaledown {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.0);
}
}
@keyframes enlarge {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1.6);
}
<body>
<h1>Hello</h1>
<div class="background">
<div class="content">
<div class="block x1">
<img class="img1" src="https://picsum.photos/200/150">
<div class="img-back">
<p>Kheily shookh tab hastin. Tu yak nemat sheeren hasti, Azizam, Yooram, Joonam, Dostam, Khoshgelam.</p>
</div>
</div>
<div class="block x2">I will add image here, and img-back1 with similar effect</div>
<div class="block x3">I will add image here, and img-back2</div>
<div class="block x4">I will add image here, and img-back3</div>
<div class="block x5">I will add image here, and img-back4</div>
</div>
</div>
</body>
Answered By - Tim R
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.