Animating web images from center to to left and right on click - javascript

I want to achieve this result of the trees moving from center to left and right on click.
I was trying this tutorial but it didn't work at all in translating the first tree from center to left.
I am working on the white arrows of the same section to see if its work and added changing the WHO WE ARE title to magenta to see if the function is working and it is but the image isn't moving at all.
<section id="abtus">
<div class=" container position-absolute" style=" left:100px; float: left; z-index: 100;">
<a href="#abtus">
<button onclick="next()"><span class="arrow1"></span></button>
</a>
</div>
<div class="container position-relative">
<div class="row mt-5 ms-5">
<div class="col offset-md-1 col-md-4">
<h3 class="text1 pb-3" id="myP">WHO WE ARE</h3>
<p class="text2 p-1">
We are two sisters who come from a similar
<br>
background of love for everything creative and magical.
</p>
<p class="text2 p-1">
We aim to deliver your stories with interesting
<br>
visually pleasing magic that separates you from the rest!
</p>
<p class="text2 p-1">
To guarantee great quality work and also an added fun
<br>
element to your project.
</p>
</div>
<div class="col col-md-4">
<h3 class="text1 pb-3">THE TEAM</h3>
<div class="row-4 pb-5 position-relative">
<p class="text2 pb-4">We have a rich experience in the market, especially
<br>
in gaming and animation. We work with several tasks
<br>
such as visual development, concept art, character design,
<br>
graphic design, branding, and social media.<br><br>
Yes, We do everything!</p>
</div>
</div>
</div>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute" style="right: 200px;">
<img src="./images/tree1.png" width="800" class="img" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="./images/tree2.png" width="900">
</div>
</div>
<div class="container position-absolute" style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute " style="right: 200px;">
<img src="https://imgur.com/9d6S7wK" width="800" class="img tree1" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="https://imgur.com/VOFz7Hi" width="900">
</div>
</div>
<div class="container position-absolute " style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
</section>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
CSS
section{
background-color: pink;
height: 100%;
width: 100%;
}
tree1{
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(https://imgur.com/9d6S7wK");
background-size: 100% 100%;
width: 50%;
height: 50vh;
}
.arrow1{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(45deg);
z-index: 1;
}
.arrow2{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(225deg);
z-index: 1;
}
.img{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
;}
.img .horizTranslate{
margin-right: 80% !important;
}
.img .horizTranslateReverse{
margin-left: 0% !important;
}
}
JS
const img = document.querySelector("#img");
function next() {
document.getElementById("myP").style.color = "magenta";
img.classList.remove("horizTranslateReverse");
img.classList.add("horizTranslate");
}
function pre() {
document.getElementById("myP").style.color = "black";
img.classList.remove("horizTranslate");
img.classList.add("horizTranslateReverse");
}
I've included the code of this section here and uploaded the trees images. So far I managed to put the section style 100% but it is the parallax element that is driving me crazy.
Could someone please help me in figuring out what is wrong?

Related

JavaScript: How can I make the CSS translate function end up in a given div regardless of where it starts?

I am trying to create a card game but I am stuck at the end point of the Translate function, the player has 30 cards (for programming I only use four since it is easier with less lines), when clicking on a card, the card makes an animation with translate and rotate to reveal the value of the card, and since I only need to reveal the value of 3 cards, I need them to end up in a specific place and be clearly visible, even if the user chooses consecutive cards.
The problem is that I can't make the card end in the div that has the Card1 label, since translate moves me according to the starting point and doesn't to the end point. Can someone help me find a way to do this with translate or is there any other way to do it?
Thank you!
<!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>
<style>
body {
background-color: #100e17;
font-family: sans-serif;
}
.container {
position: absolute;
height: 280px;
width: 1200px;
top: 60px;
left: calc(28% - 300px);
display: flex;
}
.card{
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.card1 {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
.card2 {
display: flex;
height: 260px;
width: 200px;
background-color: red;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
backface-visibility: hidden;
}
.animate{
position: relative;
transform: perspective(600px) translate(0px, 300px) rotateY(-180deg);
transform-origin: 100% 50%;
transition-property: transform;
transition-duration: 3s;
}
.card .card1,
.animate .card .card2{
position: absolute;
backface-visibility: hidden;
}
.card .card2 {
transform: rotateY(-180deg);
}
.title {
color: white;
font-weight: 300;
position: absolute;
left: 20px;
top: 15px;
}
.answer {
position: absolute;
height: 260px;
width: 300px;
top: 360px;
left: 250px;
display: flex;
}
label {
color: white;
}
.solve {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card1">
<h3 class="title">Card front 1</h3>
</div>
<div class="card2">
<h3 class="title">Card back 1</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 2</h3>
</div>
<div class="card2">
<h3 class="title">Card back 2</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 3</h3>
</div>
<div class="card2">
<h3 class="title">Card back 3</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 4</h3>
</div>
<div class="card2">
<h3 class="title">Card back 4</h3>
</div>
</div>
</div>
<div class="answer">
<label for="solve">Card 1</label>
<div class="solve" id="solve"></div>
</div>
<script>
const card = document.querySelectorAll(".card");
const card2 = document.querySelector('.card2');
let fragment = document.querySelector(".solve");
card.forEach((card) => {
card.style.display = 'block';
card.onmousedown = function () {
card.classList.add('animate');
};
</script>
</body>
</html>

How to get smooth transition of caraousel slides

I am implementing an carousel on click of previous and next the slide changes , this is my code which is working fine the only issue is transition, it is not as smooth as expected. I have attached the working copy of the code.
Can anyone please help why it is not going smooth, what i am missing
Thanks
let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
sessions.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = sessions[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
$(document).ready(function () {
$('#sessionCarousel').carousel({ interval: false });
$('#sessionCarousel').carousel('pause');
});
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1pxsolidrgba(0,0,0,.125);
border-radius: .25rem;
margin: 10px;
}
.block-container-component .force-img-background {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% auto !important;
}
.parent-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.title-anchor {
margin-left: 3rem !important;
}
#media (min-width: 768px) {
.parent-container {
width: 750px;
}
}
#media (min-width: 992px) {
.parent-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.parent-container {
width: 1170px;
}
}
#media (max-width: 767px) {
#sessionContainer .carousel-inner .carousel-item>div {
display: none;
}
#sessionContainer .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
#sessionContainer .carousel-inner .carousel-item-end.active,
#sessionContainer .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#sessionContainer .carousel-inner .carousel-item-start.active,
#sessionContainer .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
#sessionContainer .card img {
width: 98%;
}
#sessionContainer .carousel-item {
justify-content: space-between;
}
}
#media (max-width: 767px) {
#sessionContainer .card img {
width: 100%;
}
#sessionContainer .overlay {
width: 100%;
/* height: 75vh; */
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: block;
}
}
.carousel-control-next,
.carousel-control-prev {
width: 22%;
}
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
transform: translateX(0);
}
#sessionContainer .card {
border: 0;
}
#sessionContainer .card {
position: relative;
border-radius: 1.5rem !important;
}
#sessionContainer .card .card-img-overlays {
position: absolute;
bottom: 15%;
left: 10%;
color: #fff;
font-weight: bolder;
}
#sessionContainer a {
text-decoration: none;
}
#sessionContainer .indicator {
border: 1px solid rgb(202, 202, 202);
padding: 3px 6px 3px 6px;
}
#sessionContainer .indicator:hover {
background-color: blue;
border: 1px solid blue;
transition: 200ms;
}
#sessionContainer .indicator:hover {
color: white;
transition: 200ms;
}
#sessionContainer .indicator {
color: lightgray;
}
#sessionContainer .float-end {
padding-top: 10px;
}
#sessionContainer .card-body {
background: #041E42;
color: white;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 1.5rem 2rem !important;
}
#sessionContainer .card-img-top {
position: relative;
}
.card .main-img {
position: relative !important;
}
.card:hover .bot-text {
display: block !important;
}
.card:hover .sub-text {
display: block !important;
}
.carousel-caption {
color: #1f1818 !important;
text-align: left;
position: absolute;
right: 15%;
left: 18%;
top: 36%;
}
.top-right {
position: absolute;
right: 5%;
top: 7%;
}
.btn-know {
background: white !important;
color: black;
border-radius: 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
padding: .6rem 2rem !important;
margin-top: 3rem !important;
}
.line {
height: 6px;
width: 100%;
background: #2ade32;
position: absolute;
bottom: 0;
left: 2%;
}
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<div class="block-container parbase section">
<div class="block-container-component full-width classic theme-blue">
<div class="mt-5 force-img-background"
style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
data-overlay="0">
<div class="block-container margin-bottom-0">
<div class="block-container-list top-bot-no-inside-padding left-right-">
<div class="title section">
<div class="custom-targeting-buttons "></div>
<h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
takeaway
infographics</h3>
</div>
<div class="html-component-2.0 section">
<!-- Raw HTML -->
<div class="rte-styles margin-bottom-50">
<div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
<div class="row mx-auto my-auto justify-content-center">
<div class="col-1">
<a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="prev">PREVIOUS
<img
src=""
alt="">
</a>
</div>
<div class="col-10">
<div id="sessionCarousel" class="carousel slide transform">
<div class="carousel-inner mx-auto row w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe1</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe2</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe3</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe4</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe5</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe6</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
<a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="next">NEXT
<img
src=""
alt="">
</a>
</div>
</div>
</div>
</div>
<!-- HTML Form -->
</div>
<div class="button-2-0 section">
<div class="custom-targeting-buttons "></div>
<div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
<a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
href="" role="button">
<span>
<i class=" button-icon-alignment-left button-icon-content2 btn"></i>
Click here for more
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Just add carousel-fade and edit the bootstrap5 css3 directly to get the required effect
for example in your code i added
checkout my video explaining this on my custom bootstrap5 blog theme
https://youtu.be/SZkv2ipRico
.carousel-item {
transition-duration: 1.5s;
}
.transform {
transition: 5s ease-out 5s ease-in 1s ease-in-out;
opacity: 90%;
}
.carouse-fade{
transition-duration: 1.5s;
opacity: 50%;
}
and added carousel-fade like i showed you before in the
<div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<style>
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1pxsolidrgba(0,0,0,.125);
border-radius: .25rem;
margin: 10px;
}
.block-container-component .force-img-background {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 86% auto !important;
}
.parent-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.title-anchor {
margin-left: 3rem !important;
}
#media (min-width: 768px) {
.parent-container {
width: 750px;
}
}
#media (min-width: 992px) {
.parent-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.parent-container {
width: 1170px;
}
}
#media (max-width: 767px) {
#sessionContainer .carousel-inner .carousel-item>div {
display: none;
}
#sessionContainer .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
#sessionContainer .carousel-inner .carousel-item-end.active,
#sessionContainer .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#sessionContainer .carousel-inner .carousel-item-start.active,
#sessionContainer .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
#sessionContainer .card img {
width: 98%;
}
#sessionContainer .carousel-item {
justify-content: space-between;
}
}
#media (max-width: 767px) {
#sessionContainer .card img {
width: 100%;
}
#sessionContainer .overlay {
width: 100%;
/* height: 75vh; */
}
#sessionContainer .carousel-inner .carousel-item.active,
#sessionContainer .carousel-inner .carousel-item-next,
#sessionContainer .carousel-inner .carousel-item-prev {
display: block;
}
}
.carousel-control-next,
.carousel-control-prev {
width: 22%;
}
#sessionContainer .carousel-inner .carousel-item-end,
#sessionContainer .carousel-inner .carousel-item-start {
transform: translateX(0);
}
#sessionContainer .card {
border: 0;
}
#sessionContainer .card {
position: relative;
border-radius: 1.5rem !important;
}
#sessionContainer .card .card-img-overlays {
position: absolute;
bottom: 15%;
left: 10%;
color: #fff;
font-weight: bolder;
}
#sessionContainer a {
text-decoration: none;
}
#sessionContainer .indicator {
border: 1px solid rgb(202, 202, 202);
padding: 3px 6px 3px 6px;
}
#sessionContainer .indicator:hover {
background-color: blue;
border: 1px solid blue;
transition: 200ms;
}
#sessionContainer .indicator:hover {
color: white;
transition: 200ms;
}
#sessionContainer .indicator {
color: lightgray;
}
#sessionContainer .float-end {
padding-top: 10px;
}
#sessionContainer .card-body {
background: #041E42;
color: white;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: 1.5rem 2rem !important;
}
#sessionContainer .card-img-top {
position: relative;
}
.card .main-img {
position: relative !important;
}
.card:hover .bot-text {
display: block !important;
}
.card:hover .sub-text {
display: block !important;
}
.carousel-caption {
color: #1f1818 !important;
text-align: left;
position: absolute;
right: 15%;
left: 18%;
top: 36%;
}
.top-right {
position: absolute;
right: 5%;
top: 7%;
}
.btn-know {
background: white !important;
color: black;
border-radius: 20px !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
padding: .6rem 2rem !important;
margin-top: 3rem !important;
}
.line {
height: 6px;
width: 100%;
background: #2ade32;
position: absolute;
bottom: 0;
left: 2%;
}
.carousel-item {
transition-duration: 1.5s;
}
.transform {
transition: 5s ease-out 5s ease-in 1s ease-in-out;
opacity: 90%;
}
.carouse-fade{
transition-duration: 1.5s;
opacity: 50%;
}
</style>
<div class="block-container parbase section">
<div class="block-container-component full-width classic theme-blue">
<div class="mt-5 force-img-background"
style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
data-overlay="0">
<div class="block-container margin-bottom-0">
<div class="block-container-list top-bot-no-inside-padding left-right-">
<div class="title section">
<div class="custom-targeting-buttons "></div>
<h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
takeaway
infographics</h3>
</div>
<div class="html-component-2.0 section">
<!-- Raw HTML -->
<div class="rte-styles margin-bottom-50">
<div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
<div class="row mx-auto my-auto justify-content-center">
<div class="col-1">
<a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="prev">PREVIOUS
<img
src=""
alt="">
</a>
</div>
<div class="col-10">
<div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner mx-auto row w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe1</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe2</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe3</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe4</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe5</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img-top">
<div class="line"></div>
<img
src="https://picsum.photos/200"
alt="Card image" style="width:100%">
</div>
<div class="card-body">
<h6 class="card-title">John Doe6</h6>
<p class="card-text">Some example text some example
text. </p>
Know more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
<a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
data-bs-slide="next">NEXT
<img
src=""
alt="">
</a>
</div>
</div>
</div>
</div>
<!-- HTML Form -->
</div>
<div class="button-2-0 section">
<div class="custom-targeting-buttons "></div>
<div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
<a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
href="" role="button">
<span>
<i class=" button-icon-alignment-left button-icon-content2 btn"></i>
Click here for more
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
sessions.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = sessions[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
$(document).ready(function () {
$('#sessionCarousel').carousel({ interval: false });
$('#sessionCarousel').carousel('pause');
})
</script>

Why does the image inside a scaled div become smaller instead of scaling with its parent?

I'm trying to create a hover effect on a div, which scales the whole div slightly. That works well so far, but when i put an image inside that div, it becomes smaller instead of scaling with its parent.
I created a fiddle to illustrate the issue: Fiddle
<main>
<div class=" w-100 row">
<div class="col-6">
<div class="base square clickable">
<div class="content">
<div class="d-flex align-items-center justify-content-around flex-column h-100">
<img src="test.jpg" alt="Company" width="50%">
<h4 class="mt-2">Company Name</h4>
<h5 class="mt-2">Zusatz info</h5>
</div>
</div>
</div>
</div>
</div>
</main>
.base {
background-color: grey;
border-radius: 30px;
}
.square {
padding-bottom: 100%;
margin: 10px;
}
.content {
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
}
.base img {
border-radius: 50%;
height: auto;
}
.base.clickable {
transition: transform 300ms;
}
.base.clickable:hover {
cursor: pointer;
transform: scale(1.05);
}
Does anyone have an idea why the image doesn't scale properly?

content{position: absolute;}
remove the element from the normal document flow
so it does not scale with its parent

Prevent Hover card going beyond the page

So I was trying to make a contact card on hover like twitter. When a person hover on a contact name, the card will appear. It is working fine. But it is going beyond the page.
What I need is, show it up and down according to the position.
This is my code
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
bottom: 40px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: 0;
bottom: -20px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent #d9dcde transparent;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transform: translate(0, 10px);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message p {
text-align: left;
font-size: 13px;
margin: 0;
}
<div class="popover__wrapper m-t-5">
<a>Arshad</a>
<div class="push popover__content">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 no-padding">
<div class="widget-item user ">
<div class="tiles user-dp">
<div class="tiles-body no-padding">
<img src="../assets/img/profiles/arshad-small.jpg" alt="">
<div class="overlayer bottom-right fullwidth">
<div class="overlayer-wrapper">
<div class=" p-l-20 p-r-20 p-b-20 p-t-20">
<div class="text-center"> <a class="hashtags"> Administrator </a> </div>
<div class="clearfix"></div>
</div>
</div>
</div>
<br>
</div>
</div>
<div class="tiles white ">
<div class="tiles-body">
<div class="row">
<div class="user-comment-wrapper pull-left">
<div class="comment">
<div class="user-name text-black semi-bold">Full Name </div>
<div class="preview-wrapper">Designer</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="p-l-15 p-r-20 popover__message">
<p>phone</p>
<p>Email</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried many methods, didn't find exactly. So how do I achieve it? Any help?

CSS Animation on iOS devices

I am using a CSS flip animation to show content on one side and text on the other. The animation works using a hover selector on desktop browsers. On mobile devices it should use a touch event to carry out the flip.
It works on edge, chrome and firefox and I have added additional CSS to handle older versions of IE.
However when I run it up on my iPhone I cannot get the the flip animation to work as expected.
I have attached a fiddle to show the issue I am having.
https://jsfiddle.net/rsmith93/oehqd5j6/
$(".flip-container").hover(function() {
$(this).toggleClass('hover');
});
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 360px;
height: 270px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background: rgba(33, 33, 33, 1);
color: white;
}
.name1 {
font-size: 1.5em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 40px;
left: 4px;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="row">
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 1</span>
</div>
<div class="back">
<!-- back content -->
back panel
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 2</span>
</div>
<div class="back">
<!-- back content -->
back 2
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 3</span>
</div>
<div class="back">
<!-- back content -->
back 3
</div>
</div>
</div>
</div>
Any help here is appreciated.

Categories

Resources