1
I’m having an error with the bootstrap, the Carousel is working fine but the image that should take all the spacing of the box is minimized and the Hover is not centering on the image, without the bootstrap link works all right but I need to update this code in order to use the link and I’m not getting, someone can give me an idea of what to do?
so I should stay
.box14{position:relative}
.box15,.box17,.box18{box-shadow:0 0 5px #7e7d7d;text-align:center}
.box14:before{content:"";width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;opacity:0;transition:all .35s ease 0s}
.box14:hover:before{opacity:1}
.box14 img{width:100%;height:auto}
.box14 .box-content{width:90%;height:90%;position:absolute;top:5%;left:5%}
.box14 .box-content:after,.box14 .box-content:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;transition:all .7s ease 0s}
.box14 .box-content:before{border-bottom:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);transform:scale(0,1);transform-origin:0 0 0}
.box14 .box-content:after{border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);transform:scale(1,0);transform-origin:100% 0 0}
.box14:hover .box-content:after,.box14:hover .box-content:before{opacity:1;transform:scale(1);transition-delay:.15s}
.box14 .title{font-size:21px;font-weight:700;color:#fff;margin:15px 0;opacity:0;transform:translate3d(0,-50px,0);transition:transform .5s ease 0s}
.box14:hover .title{opacity:1;transform:translate3d(0,0,0)}
.box14 .post{font-size:14px;color:#fff;padding:10px;background:#a2c270;opacity:0;border-radius:0 19px;transform:translate3d(0,-50px,0);transition:all .7s ease 0s}
.box14 .icon,.box15 .icon{padding:0;list-style:none}
.box14:hover .post{opacity:1;transform:translate3d(0,0,0);transition-delay:.15s}
.box14 .icon{width:100%;margin:0;position:absolute;bottom:-10px;left:0;opacity:0;z-index:1;transition:all .7s ease 0s}
.box14:hover .icon{bottom:20px;opacity:1;transition-delay:.15s}
.box14 .icon li a{display:block;width:40px;height:40px;line-height:40px;border:1px solid #fff;border-radius:0 16px;font-size:14px;color:#fff;margin-right:5px;transition:all .4s ease 0s}
.box14 .icon li a:hover{background:#a2c270;border-color:#a2c270}
@media only screen and (max-width:990px){.box14{margin-bottom:30px}
}
.icon-cards {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin: 0;
-webkit-perspective: 10000px;
perspective: 10000px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.icon-cards__content {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
-webkit-animation: carousel 15s infinite cubic-bezier(0.005, 0.625, 0.365, 0.840) forwards;
animation: carousel 15s infinite cubic-bezier(0.005, 0.625, 0.365, 0.840) forwards;
}
.icon-cards__item {
border: 1px solid #a2c270;
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 300px;
}
.icon-cards__item:nth-child(1) {
background:linear-gradient(45deg, hsla(83, 40%, 60%, 0.60), hsla(162, 33%, 61%, 0.60))!important;
-webkit-transform: rotateY(0) translateZ(300px);
transform: rotateY(0) translateZ(300px);
}
.icon-cards__item:nth-child(2) {
background:linear-gradient(45deg, hsla(83, 40%, 60%, 0.60), hsla(162, 33%, 61%, 0.60))!important;
-webkit-transform: rotateY(120deg) translateZ(300px);
transform: rotateY(120deg) translateZ(300px);
}
.icon-cards__item:nth-child(3) {
background:linear-gradient(45deg, hsla(83, 40%, 60%, 0.60), hsla(162, 33%, 61%, 0.60))!important;
-webkit-transform: rotateY(240deg) translateZ(300px);
transform: rotateY(240deg) translateZ(300px);
}
@-webkit-keyframes carousel {
0%, 17.5% {
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
}
27.5%, 45% {
-webkit-transform: translateZ(-182px) rotateY(-120deg);
transform: translateZ(-182px) rotateY(-120deg);
}
55%, 72.5% {
-webkit-transform: translateZ(-182px) rotateY(-240deg);
transform: translateZ(-182px) rotateY(-240deg);
}
82.5%, 100% {
-webkit-transform: translateZ(-182px) rotateY(-360deg);
transform: translateZ(-182px) rotateY(-360deg);
}
}
@keyframes carousel {
0%, 17.5% {
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
}
27.5%, 45% {
-webkit-transform: translateZ(-182px) rotateY(-120deg);
transform: translateZ(-182px) rotateY(-120deg);
}
55%, 72.5% {
-webkit-transform: translateZ(-182px) rotateY(-240deg);
transform: translateZ(-182px) rotateY(-240deg);
}
82.5%, 100% {
-webkit-transform: translateZ(-182px) rotateY(-360deg);
transform: translateZ(-182px) rotateY(-360deg);
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Link CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/estilo.css" rel="stylesheet">
</head>
<body>
<!----------------------carousel cards-------------------------->
<figure class="icon-cards mt-5">
<div class="icon-cards__content">
<div class="icon-cards__item">
<div class="col-md-4 col-sm-6">
<div class="box14">
<img src="http://bestjquery.com/tutorial/hover-effect/demo105/images/img-1.jpg" alt="">
<div class="box-content mt-5" align="center">
<h3 class="title">Lorem, ipsum.</h3>
<span class="post">Web Designer</span>
</div>
</div>
</div>
</div>
<div class="icon-cards__item">
<div class="col-md-4 col-sm-6">
<div class="box14">
<img src="http://bestjquery.com/tutorial/hover-effect/demo105/images/img-1.jpg" alt="">
<div class="box-content mt-5" align="center">
<h3 class="title">Lorem, ipsum.</h3>
<span class="post">Web Designer</span>
</div>
</div>
</div>
</div>
<div class="icon-cards__item">
<div class="col-md-4 col-sm-6">
<div class="box14">
<img src="http://bestjquery.com/tutorial/hover-effect/demo105/images/img-1.jpg" alt="">
<div class="box-content mt-5" align="center">
<h3 class="title">Lorem, ipsum.</h3>
<span class="post">Web Designer</span>
</div>
</div>
</div>
</div>
</div>
</figure>
<!--JavaScript / jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>