I'm sure this is incredibly stupid once I get a hint, but I can't see why the hover doesn't work. I added the jQuery just to check whether or not it works with a click.
$(document).on("click", ".figure", function() {
$(".popover").css("opacity", "1");
})
.container {
position: relative;
}
.popover {
background-color: blue;
position: absolute;
top: 0;
left: 200px;
opacity: 0;
transition: opacity 0.5s ease-in-out 0s;
}
.figure:hover .popover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='figure'>
<img src='https://placehold.it/100' />
</div>
<div class='popover'>
<p>
Bla bla
</p>
</div>
</div>
Because your .popover div is not a child of .figure div.
Used + selector for this
$(document).on("click", ".figure", function() {
$(".popover").css("opacity", "1");
})
.container {
position: relative;
}
.popover {
background-color: blue;
position: absolute;
top: 0;
left: 200px;
opacity: 0;
transition: opacity 0.5s ease-in-out 0s;
}
.figure:hover + .popover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='figure'>
<img src='https://placehold.it/100' />
</div>
<div class='popover'>
<p>
Bla bla
</p>
</div>
</div>
Change :
.figure:hover .popover {
opacity: 1;
}
To :
.figure:hover + .popover {
opacity: 1;
}
Try changing classes into id´s and than make hover.
JSFiddle link
#figure:hover + #popover {
opacity:1;
}
Related
Im attempting to make a clicker game with html css and javascript, and was trying to get some cursors to be animated like the ones that click for you in cookie clicker.
you will probably see what I mean when you run the project
I just want the cursors to move away from the div and then back again
here is my code:
const images = document.querySelectorAll("img");
images.forEach(function(e) {
let randomval = Math.floor(Math.random() * (359 - 0 + 1))
e.style.transform = "rotate(" + randomval + "deg)";
});
* {
margin: 0;
padding: 0;
}
.clicked {
margin: 100px;
width: 300px;
height: 300px;
border-radius: 100%;
background-color: aquamarine;
}
#keyframes clickeranim {
0% {
transform: translate(0, 150px);
}
50% {
transform: translate(0, 165px);
}
100% {
transform: translate(0, 150px);
}
}
.wrapper {
position: absolute;
width: 13.1px;
height: 17px;
position: absolute;
top: 250px;
left: calc(250px - calc(13.1px / 2));
transform-origin: 50% -150px;
transform: translate(0, 150px);
animation: clickeranim 1s infinite ease-in-out;
}
img {
width: 13.1px;
height: 17px;
transform-origin: 50% -150px;
}
<div class="clicked"></div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
I'm trying to emulate flipbook-vue component, but with pure CSS.
I would like to combine that component with this CSS example on CodePen.
On the flipbook-vue side, I like how the book remains centered when the first page opens, is that possible to do with CSS only? I tried, but the book doesn't expand as the cover rotates.
Also, do the pages need to go backwards like on CodePen example?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page flip</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
text-align: center;
}
div {
height: 100%;
}
#book {
border: 1px solid blue;
display: inline-block;
background: #eee;
text-align: center;
}
div.page {
border: 1px solid red;
width: 40vw;
height: 60%;
}
div.page.flipped {
transition: transform 1s;
transform: rotateY(180deg);
transform-origin: left center;
}
</style>
<script>
window.onload = () => {
setTimeout(flipPage, 1000);
}
flipPage = () => {
document.getElementById('page-1').classList.add('flipped');
}
</script>
</head>
<body>
<div id="book">
<div class="page" id="page-1">
PAGE 1
</div>
<div class="page" id="page-2">
PAGE 2
</div>
</div>
</body>
</html>
I think I'm happy enough with the solution I came up with
var page = 1;
var timerId = null;
window.onload = () => {
timerId = setInterval(flipPage, 1000);
}
toggleClass = (id, cssClass) => {
document.getElementById(id).classList.toggle(cssClass);
}
flipPage = () => {
if (page === 1) {
toggleClass('book', 'two-pages');
} else if (page === 8) {
toggleClass('book', 'closed');
toggleClass('book', 'two-pages');
clearInterval(timerId);
}
toggleClass('page-' + page, 'flipped');
page ++;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--page-width: 40vw;
--transition-speed: 2s;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
perspective: 400vw;
background: #ccc;
}
body, .page > div {
display: flex;
align-items: center;
justify-content: center;
}
#book, .page {
width: var(--page-width);
height: 80vh;
}
#book {
transform-style: preserve-3d;
backface-visibility: visible;
flex-shrink: 0;
transition: var(--transition-speed) all ease;
position: relative;
margin: 0 auto;
}
#book.two-pages {
width: calc(2 * var(--page-width));
}
#book.closed {
width: calc(3 * var(--page-width));
}
.front, .back {
background: navy;
}
.page {
background: white;
border: 1px solid red;
position: absolute;
right: 0;
}
div.page.flipped {
transform: rotateY(180deg);
transition: transform var(--transition-speed);
transform-origin: left center;
}
.page > div {
position: absolute;
width: 100%;
height: 100%;
}
.page > div.back-face {
opacity: 0;
}
.page.flipped > div.front-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 0;
}
.page.flipped > div.back-face {
opacity: 0;
}
.page.flipped > div.back-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 1;
}
#page-1.flipped {
transform: rotateY(-180.04deg);
}
#page-2.flipped {
transform: rotateY(-180.03deg);
}
#page-3.flipped {
transform: rotateY(-180.02deg);
}
#page-4.flipped {
transform: rotateY(-180.01deg);
}
#page-5.flipped {
transform: rotateY(-180.0deg);
}
#page-6.flipped {
transform: rotateY(-179.99deg);
}
#page-7.flipped {
transform: rotateY(-179.98deg);
}
#page-8.flipped {
transform: rotateY(-179.97deg);
}
<div id="book" class="book">
<div class="page back" id="page-8">
<div class="front-face">PAGE 8</div>
<div class="back-face">BYE</div>
</div>
<div class="page page6" id="page-7">
<div class="front-face">PAGE 7</div>
<div class="back-face"></div>
</div>
<div class="page page5" id="page-6">
<div class="front-face">PAGE 6</div>
<div class="back-face"></div>
</div>
<div class="page page4" id="page-5">
<div class="front-face">PAGE 5</div>
<div class="back-face"></div>
</div>
<div class="page page3" id="page-4">
<div class="front-face">PAGE 4</div>
<div class="back-face"></div>
</div>
<div class="page page2" id="page-3">
<div class="front-face">PAGE 3</div>
<div class="back-face"></div>
</div>
<div class="page page1" id="page-2">
<div class="front-face">PAGE 2</div>
<div class="back-face"></div>
</div>
<div class="page front" id="page-1">
<div class="front-face">HELLO</div>
<div class="back-face">TO</div>
</div>
</div>
I ran into this issue where I am trying to rotate this div on hover, but when I hover, it tries to hover but then it goes back to the normal position. could you please help?
here is my fiddle: https://jsfiddle.net/Lcb7okfn/
.section-tours{
background-color:pink;
padding:5rem 0 50rem 0;
}
.center-text{
background-color:blue;
padding:30px 0;
}
.col-1-of-3{
width: calc((100%-20px)/3);
}
.card{
background-color: orange;
height:15rem;
transition: all .8s;
perspective: 1000px;
-moz-perspective: 1000px;
}
.card:hover{
transform: rotateY(180deg);
}
Apply the hover to a parent element and also move the perspective declaration to the parent:
.section-tours {
background-color: pink;
padding: 5rem 0 50rem 0;
}
.center-text {
background-color: blue;
padding: 30px 0;
}
h2 {
padding: 0;
margin: 0;
}
.col-1-of-3 {
width: calc((100%-20px)/3);
perspective: 1000px;
}
.card {
background-color: orange;
height: 15rem;
transition: all .8s;
}
.col-1-of-3:hover .card {
transform: rotateY(180deg);
}
<section class="section-tours">
<div class="center-text">
<h2>
Most popular tours
</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card class_side">
TEXT
</div>
</div>
</div>
<div class="col-1-of-3">
</div>
<div class="col-1-of-3">
</div>
</div>
</section>
I am trying to create an jsp home page with slide show. I am using eclipse ide, JSP,CSS and JS. I am able to get the slide show everything works just fine but the height of the images in the slideshow are different i have given height as 60% for all images. But each image shows thier own original height. Can anyone guide what needs to be corrected. Below is the code.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next {
font-size: 11px
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="kn">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<div class="divider"></div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/1.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/2.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/3.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/4.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/5.jpg" height="50%" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<script src="js/home.js"></script>
</body>
</html>
welcome to SO,
you need to define height for your container of slideshow in your case it is slideshow-container so in css,
.slideshow-container{
height:300px;
}
this should do the trick.!, hope this helps.
I have a set of tabs that each contain a child element that animates. What happens when I click each tab is that the animation of the child element within the tab runs. I do not want it to run. I want the animation to run the first time then not replay when it's parent switch from display:none to display:block.
In the example I made below I have 2 parent divs, each with a child div that animates over to the right. When each parent is set to block the animation replays, I do not want that to happen. I want each child to stay positioned over to the right. How can I make that happen?
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
display: none;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39);
}
.active {
display: block;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Fiddle Demo
Yes, animations will restart every time the display value is changed from none to something else.
As per W3C Spec: (emphasis is mine)
Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.
There is no direct way to prevent this from happening because that is the intended behavior. You can workaround the situation by using other methods to hide the element instead of using display: none.
Following are a few suggestions on how the element could be hidden without display: none. It is not mandatory to use only one of the following workarounds, it could be some other way also as long as it doesn't involve changing the display property of the element.
Using height: 0, width: 0, overflow: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
height: 0;
width: 0;
overflow: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
height: auto;
width: auto;
overflow: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Adding a container, using position: absolute and opacity: 0 to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
opacity: 0;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
opacity: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and visibility: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
visibility: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
visibility: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and z-index to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
z-index: -1;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
z-index: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>