Creating Multi image slide scrolling with hover effects so the functionality will be scrolling until hover the image or click on the image below I have added the CSS code for reference.
<style>
.row{
display: flex;
margin-top: 50px;
margin-bottom: 50px;
}
.column{
border-radius: 10px;
background-color: #526666;
margin: 5px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 25px;
line-height: 150%;
letter-spacing: -0.02em;
color: #FFFFFF;
}
@-ms-viewport{
zoom: 1.0;
width:extend-to-zoom;
}
@viewport{
zoom:1.0;
width:extend-to-zoom;
}
h1{
margin-top: 40px;
margin-left: 20px;
color:white
}
h3{
margin-top: 40px;
margin-left:30px;
color:white
}
p{
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
font-size: 120%;
color:white
}
.image123 {
display: grid;
place-items: center;
overflow:hidden;
}
.imageabc {
display: flex;
width: calc(325px * 10);
width: 555px;
height: 450px;
margin: 5px;
place-items:center;
padding: 20px;
padding-top: 38px;
left: 730px;
top: 285px;
display: grid;
overflow:hidden;
}
.column:hover {
opacity: 1;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-380px * 5));
}
}
.imageabc {
display: flex;
width: calc(600px * 10);
animation: scroll 20s linear infinite;
}
.imageabc:hover {
animation-play-state: paused;
opacity: 1;
}
.carousel-wrap-en-review .en-rating-review {
display: flex;
}
.carousel-wrap-en-review .owl-carousel .en-rating-review img {
width: 25px;
height: 25px;
}
.carousel-wrap-en-review .owl-carousel .owl-content {
padding: 20px;
padding-top: 38px
}
@media only screen and (min-width: 1400px) and (max-width: 1500px) {
.main .carousel-wrap-en-review .owl-content-text {
height: auto;
margin-bottom: 81px;
}
.carousel-wrap-en-review .en-review-cust {
margin-top: 15px;
}
.carousel-wrap-en.carousel-wrap-en-review .owl-carousel .owl-content {
padding: 19px;
}
.carousel-wrap-en.body{
padding-bottom:171px;
}
/*.main .carousel-wrap-en-review .custom-nav.owl-nav button {*/
/* padding: 0px 41px 0px 252px;*/
/* }*/
}
@media only screen and (min-width: 1200px) and (max-width: 1700px) {
.carousel-wrap-en-review.owl-carousel .owl-content {
height: auto;
}
}
@media only screen and (min-width: 1200px) {
.carousel-wrap-en-review .owl-content-text {
width: 100%;
margin: auto;
margin-bottom: 80px;
}
.carousel-wrap-en-review .owl-carousel .owl-content {
height: auto;
}
.carousel-wrap-en-review .owl-content-text p {
font-size: 25px;
}
.carousel-wrap-en-review .en-review-cust {
font-size: 17px;
}
.carousel-wrap-en-review .owl-stage {
left: -100px;
}
.carousel-wrap-en-review {
padding-left: 2.5%;
padding-right: 2.5%;
}
.carousel-wrap-en-review .owl-carousel .owl-item {
filter: blur(0px);
-webkit-filter: blur(0px);
opacity: 1;
-webkit-opacity: 1;
}
/*.carousel-wrap-en-review .owl-carousel .owl-item.active {*/
/* filter: blur(0px);*/
/* -webkit-filter: blur(0px);*/
/* }*/
.carousel-wrap-en-review .en-head-text {
font-size: 42px;
}
.carousel-wrap-en-review .custom-nav.owl-nav button {
padding: 0px 41px 0px 245px;
}
.carousel-wrap-en-review {
padding-bottom: 150px;
}
.carousel-wrap-en-review .owl-carousel .hovered.intro {
filter: blur(0px);
-webkit-filter: blur(0px);
opacity: 1;
-webkit-opacity: 1;
animation-play-state: paused;
}
.carousel-wrap-en-review .owl-carousel .hovered {
filter: blur(0px);
-webkit-filter: blur(0px);
opacity: 0.3;
-webkit-opacity: 0.3;
animation-play-state: running;
}
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.carousel-wrap-en-review .owl-content-text p {
font-size: 21px;
}
.carousel-wrap-en-review .en-review-cust {
font-size: 17px;
padding-top: 10px;
padding-left: 1.5%;
}
.carousel-wrap-en-review .owl-content-text {
margin-bottom: 50px;
}
.carousel-wrap-en-review {
padding-left: 50px;
padding-right: 50px;
}
.carousel-wrap-en-review .owl-carousel .owl-item {
filter: blur(0px);
-webkit-filter: blur(0px);
opacity: 1;
-webkit-opacity: 1;
}
/*.carousel-wrap-en-review .owl-carousel .owl-item.active {*/
/* filter: blur(0px);*/
/* -webkit-filter: blur(0px);*/
/* }*/
.carousel-wrap-en-review .owl-carousel .hovered.intro {
filter: blur(0px);
-webkit-filter: blur(0px);
opacity: 1;
-webkit-opacity: 1;
animation-play-state: paused;
}
.carousel-wrap-en-review .owl-carousel .hovered {
filter: blur(0px);
-webkit-filter: blur(0px);
opacity: 0.3;
-webkit-opacity: 0.3;
animation-play-state: running;
}
.carousel-wrap-en-review .owl-stage {
left: -100px;
}
.carousel-wrap-en-review .en-head-text {
font-size: 42px;
}
.carousel-wrap-en-review .custom-nav.owl-nav .owl-prev {
padding-right: 65px;
}
.carousel-wrap-en-review .custom-nav.owl-nav button img {
width: 15px;
}
}
@media only screen and (max-width: 767px) {
.carousel-wrap-en-review .owl-content-text p {
font-size: 22px;
line-height: 150%;
}
.carousel-wrap-en-review .en-review-cust {
font-size: 17px;
}
.carousel-wrap-en-review .owl-content-text {
margin-bottom: 60px;
}
.carousel-wrap-en-review .en-head-text {
font-size: 32px;
margin-top: 4px;
margin-bottom: 1px;
}
.carousel-wrap-en-review .custom-nav.owl-nav .owl-prev {
padding-right: 85px;
}
.carousel-wrap-en-review .custom-nav.owl-nav button img {
width: 12px;
}
.carousel-wrap-en-review .imageabc:hover {
-webkit-animation:unset;
}
.main .carousel-wrap-en.carousel-wrap-en-review {
background-color: #FFF;
padding-top: 80px;
padding-bottom: 56px;
}
.owl-theme .en-custom-nav {
padding-top: 25px;
}
.carousel-wrap-en-review .custom-nav.owl-nav img {
width: 9px;
height: 16px;
}
.main .carousel-wrap-en-review .owl-content-text p {
font-family: Neue Helvetica;
}
.carousel-wrap-en-review .en-review-cust {
margin-top: 10px;
margin-bottom: 34px;
}
.carousel-wrap-en.carousel-wrap-en-review .slideState {
margin: 45px 0px 32px 0px;
}
.main .carousel-wrap-en .owl-content {
border-radius: 0px;
padding-top: 20px;
}
.carousel-wrap-en-review .en-custom-nav .owl-controls {
top:20%;
}
}
@media screen and (max-width:767px){
.carousel-wrap-en-review.column{
margin: -200px;
margin-left: 220px;
margin-top:-3px;
}
}
.carousel-wrap-en-review .owl-content-text p,
.carousel-wrap-en-review .en-review-cust {
font-family: Roobert;
color: #FFF;
font-weight: 300;
font-size: 17px;
line-height: 140%;
font-style: normal;
}
.carousel-wrap-en-review .en-review-cust {
padding-left: 7px;
}
.carousel-wrap-en-review .en-head-text {
font-family: Roobert;
color: #000000;
font-weight: 300;
}
.carousel-wrap-en-review .en-custom-nav .owl-controls {
display: none;
height: auto;
margin-left: auto;
width: fit-content;
top: 35%;
position: relative;
}
.carousel-wrap-en-reviewv .custom-nav.owl-nav button {
background: transparent;
border: none;
}
.carousel-wrap-en-review .custom-nav.owl-nav .disabled img {
opacity: .5;
}
.carousel-wrap-en-review .custom-nav.owl-nav .owl-next {
padding-right: 0px;
}
.carousel-wrap-en-review .slideState {
border-bottom: 2px solid #CCC9C6;
position: relative;
/* width: 98%; */
width: 100%;
margin: 50px 0px 50px 0px;
}
.carousel-wrap-en-review .slideState div {
position: relative;
border-bottom: 2px solid #000000;
top: 2px;
}
.carousel-wrap-en {
background-color: #FAF5F5;
padding-top: 79px;
padding-bottom: 271px;
}
.carousel-wrap-en-review .carousel-wrap-en-head {
border-top: 2px solid #CCC9C6;
padding-top: 4px;
}
.carousel-wrap-en .owl-content {
border-radius: 5px
}
.carousel-wrap-en-review button {
background-color: transparent;
}
.owl-content-text {
height: 198px;
}
@media only screen and (min-width: 768px) and (max-width: 825px) {
.owl-content-text {
height: 390px;
}
}
@media only screen and (min-width: 825px) and (max-width: 1100px) {
.owl-content-text {
height: 300px;
}
}
@media only screen and (min-width: 300px) and (max-width: 400px) {
.column {
height: 300px;
width: 335px;
font-size: 13px;
}
}
@media only screen and (min-width: 400px) and (max-width: 500px) {
.column {
height: 430px;
width: 345px;
font-size: 15px;
}
}
img
{
height:25px;
width:25px;
margin-top: 840px;
margin-left: 598px;
}
.carousel-wrap-en body carousel-wrap-en-review
{
position: absolute;
width: 1440px;
height: 891px;
left: 0px;
top: 0px;
}
.home{
width:100%!important;
}
</style>