120 lines
2.4 KiB
CSS
120 lines
2.4 KiB
CSS
/**
|
|
* 2022 Anvanto
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Academic Free License (AFL 3.0)
|
|
*
|
|
* @author Anvanto <anvantoco@gmail.com>
|
|
* @copyright 2022 Anvanto
|
|
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
|
|
*/
|
|
|
|
.an_banner {
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
}
|
|
.an_banner-img {
|
|
overflow: hidden;
|
|
}
|
|
.an_banner a {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
.an_banner img:not(.b-lazy),
|
|
.an_banner img.b-loaded {
|
|
width: 100%;
|
|
height: auto;
|
|
width: 100%;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
-webkit-transition: .3s ease-in-out;
|
|
transition: .3s ease-in-out;
|
|
}
|
|
.an_banner-border {
|
|
content: "";
|
|
display: block;
|
|
width: calc(100% - 30px);
|
|
height: 100%;
|
|
position: absolute;
|
|
top: -15px;
|
|
right: 0;
|
|
transition: all .4s;
|
|
box-shadow: inset 0 0 0 3px #e5e5e5;
|
|
}
|
|
.an_banner-link:hover+.an_banner-border {
|
|
top: 0;
|
|
right: 15px;
|
|
}
|
|
.an_banner-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 15px;
|
|
left: 49%;
|
|
transform: translate(0, -50%);
|
|
text-align: left;
|
|
color: #000000;
|
|
text-transform: none;
|
|
}
|
|
.an_banner-content .an_banner-title {
|
|
margin-bottom: 11px;
|
|
font-size: 46px;
|
|
text-transform: none;
|
|
}
|
|
@media (max-width: 767px) {
|
|
.an_banner {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.an_banner-type2 {
|
|
margin-bottom: 30px;
|
|
}
|
|
.an_banner-type2-link {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
right: 15px;
|
|
bottom: 0;
|
|
left: 15px;
|
|
}
|
|
.an_banner-type2-img {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.an_banner-type2-img img {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
.an_banner-type2-img:before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -95%;
|
|
z-index: 2;
|
|
display: block;
|
|
content: '';
|
|
width: 50%;
|
|
height: 100%;
|
|
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
|
|
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
|
|
-webkit-transform: skewX(-25deg);
|
|
transform: skewX(-25deg);
|
|
}
|
|
.an_banner-type2-link:hover+.an_banner-type2-img:before {
|
|
-webkit-animation: shine .75s;
|
|
animation: shine .75s;
|
|
}
|
|
@-webkit-keyframes shine {
|
|
100% {
|
|
left: 125%;
|
|
}
|
|
}
|
|
@keyframes shine {
|
|
100% {
|
|
left: 125%;
|
|
}
|
|
} |