I want to create for my <a> section nice looking smooth zoom-in effect when user points his mouse on it.
It works,but for some reason I have lines between my <div> sections inside the <a> section.
Here is my example: http://jsfiddle.net/p1g0Lzu3/23/
So, on hover, there are two gray lines, which I don't want to be there.
I tried various things, but still I can't find the way to fix that.
CodePudding user response：
The easiest fix is to give the wrapper the same background color as the divs inside
.wrapper {
background-color: #243964;
}
CodePudding user response：
There is something with not setting a height to .main class that puts those lines in there. With static position by default, it will try to fill any unfilled space. It's kind of a weird concept but I was able to fix it by adding:
/* additions */
.main {
height: 80%;
}
Also, I assume you have the scroll there for a reason so I didn't change that around at all. I added the media queries simply for snippet viewing sake. I suggest clicking full-page
.container-box {
transform: translateX(70%);
display: flex;
width: 40%;
flex-direction: row;
justify-content: space-between;
padding-top: 40px;
padding-bottom: 40px;
}
.shadow-bottom {
-webkit-box-shadow: 0 12px 0px 6px #6076a7;
-moz-box-shadow: 0 12px 0px -6px #6076a7;
box-shadow: 0 12px 0px -6px #6076a7;
}
.wrapper {
backface-visibility: hidden;
-webkit-transform: translateZ(0);
display: flex;
flex-flow: row wrap;
flex: 100px;
margin: 20px;
text-align: center;
}
.wrapper:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.wrapper > * {
flex: 1 100%;
}
.header {
background: #243964;
text-align: left;
color: #dbd6d6;
padding: 20px;
font-size: 12px;
}
.hr1 {
border: 0;
border-top: 1px solid #4990e2;
}
.footer {
background: #243964;
text-align: left;
color: white;
padding: 20px;
font-size: 14px;
}
.main {
text-align: left;
background: #243964;
color: #fefefe;
padding: 20px;
padding-top: 35px;
padding-bottom: 20px;
height: 200px;
}
.box-title {
font-weight: 600;
font-size: 20px;
padding-bottom: 10px;
color: white;
}
.box-content {
line-height: 1.9;
font-size: 12px;
color: #dbd6d6;
}
.box-paragraph {
word-spacing: 4px;
}
.main .footer {
height: fit-content;
overflow: hidden;
}
/* additions */
.main {
height: 80%;
}
@media only screen and (max-width: 1400px) {
.container-box {
width: 100%;
height: 100%;
}
.header {
height: 40px;
}
}<div class="container-box">
<a href="#" class="wrapper shadow-bottom">
<header class="header">Header 0</header>
<article class="main">
<div class="box-title">Title 0</div>
<p class="box-content">Some long text here hehehe jsdshsjhdshdsjhd</p>
</article>
<footer class="footer">
<hr class="hr1">
<div class="learn-more">
Learn more
</div>
</footer>
</a>
<a href="#" class="wrapper shadow-bottom">
<header class="header">Header 1</header>
<article class="main">
<div class="box-title">Title 1</div>
<p class="box-content">sdsdsdsd</p>
</article>
<footer class="footer">
<hr class="hr1">
<div class="learn-more">
Learn more
</div>
</footer>
</a>
</div>OR check out my fiddle
CodePudding user response：
so, I got another approach for your question, in which you have to change your "height:200px" to "min-height:200px" in 'main' class.
.container-box {
transform: translateX(70%);
display: flex;
width: 40%;
flex-direction: row;
justify-content: space-between;
padding-top: 40px;
padding-bottom: 40px;
}
.shadow-bottom {
-webkit-box-shadow: 0 12px 0px 6px #6076a7;
-moz-box-shadow: 0 12px 0px -6px #6076a7;
box-shadow: 0 12px 0px -6px #6076a7;
}
.wrapper {
backface-visibility: hidden;
-webkit-transform: translateZ(0);
display: flex;
flex-flow: row wrap;
flex: 100px;
margin: 20px;
text-align: center;
}
.wrapper:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.wrapper > * {
flex: 1 100%;
}
.header {
background: #243964;
text-align: left;
color: #dbd6d6;
padding: 20px;
font-size: 12px;
}
.hr1 {
border: 0;
border-top: 1px solid #4990e2;
}
.footer {
background: #243964;
text-align: left;
color: white;
padding: 20px;
font-size: 14px;
}
.main {
text-align: left;
background: #243964;
color: #fefefe;
padding: 20px;
padding-top: 35px;
padding-bottom: 20px;
min-height: 200px;
}
.box-title {
font-weight: 600;
font-size: 20px;
padding-bottom: 10px;
color: white;
}
.box-content {
line-height: 1.9;
font-size: 12px;
color: #dbd6d6;
}
.box-paragraph {
word-spacing: 4px;
}<!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">
<title>Document</title>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="container-box">
<a href="#" class="wrapper shadow-bottom">
<header class="header">Header 0</header>
<article class="main">
<div class="box-title">Title 0</div>
<p class="box-content">
Some long text here hehehe jsdshsjhdshdsjhd
</p>
</article>
<footer class="footer">
<hr class="hr1">
<div class="learn-more">
Learn more
</div>
</footer>
</a>
<a href="#" class="wrapper shadow-bottom">
<header class="header">Header 1</header>
<article class="main">
<div class="box-title">Title 1</div>
<p class="box-content">
sdsdsdsd
</p>
</article>
<footer class="footer">
<hr class="hr1">
<div class="learn-more">
Learn more
</div>
</footer>
</a>
</div>
</body>
</html>