<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hiệu ứng hover 10 - Code mẫu</title>
<style>
.mrtung-out {
max-width: 1600px;
margin: 20px auto;
display: flex;
flex-flow: row wrap;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.mrtung-item {
flex: 1 1 20%;
padding: 10px;
}
.mrtung-content {
-webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 0px 8px -16px rgba(242,242,242,0);
box-shadow: 0px 10px 13px -7px #000000, 0px 0px 8px -16px rgba(242,242,242,0);
position: relative;
overflow: hidden;
border-radius: 5px;
}
.mrtung-content-in {
min-height: 400px;
align-items: center;
display: flex;
padding: 10px;
}
.mrtung-item {}
.mrtung-content:before {
content: "";
width: 97%;
height: 44%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
border-radius: 0px 0px 50px 50px;
background-color: rgba(255,62,85,0.1);
overflow: hidden;
position: absolute;
left: 29%;
top: -66px;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.mrtung-content:after {
content: "";
width: 0%;
height: 0%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
border-radius: 0px 0px 50px 50px;
background-color: #ff3e55;
overflow: hidden;
position: absolute;
left: 29%;
top: -66px;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.mrtung-content:hover:after {
width: 97%;
height: 44%;
}
</style>
</head>
<body>
<div class="mrtung-out">
<div class="mrtung-item">
<div class="mrtung-content">
<div class="mrtung-content-in">
Investment Advice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus.
</div>
</div>
</div>
<div class="mrtung-item">
<div class="mrtung-content">
<div class="mrtung-content-in">
Investment Advice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus.
</div>
</div>
</div>
<div class="mrtung-item">
<div class="mrtung-content">
<div class="mrtung-content-in">
Investment Advice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus.
</div>
</div>
</div>
<div class="mrtung-item">
<div class="mrtung-content">
<div class="mrtung-content-in">
Investment Advice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus.
</div>
</div>
</div>
</div>
</body>