I pretty new in CSS/Javascript and i'm trying to do an animation where i'm zooming out in a photo and adding a text, it's basically working but i have a glitch at the beginning that i don't understand how to get rid of it...
You can also find this code on CodePen.io or GitHub Gist
I hope my description is clear enough, thanks in advance for any input !
var x = document.getElementById("img_txt");
// if (x) {
x.addEventListener("mouseover", func, false);
x.addEventListener("mouseout", func1, false);
// }
function func()
{
document.getElementById("toto").setAttribute("style", "display:block;")
}
function func1()
{
document.getElementById("toto").setAttribute("style", "display:none;")
}
.voyages {
height: 400px;
width: 100%;
margin: 0 auto;
padding: 20px 0px 10px 0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
img.imgvyge {
border-radius: 50%;
object-fit: cover;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
margin: auto 30px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.imgvyge:hover {
width: 400px;
height:400px;
}
p.text {
display: none;
z-index:100;
position:relative;
color:black;
font-size:24px;
font-weight:bold;
left:130px;
bottom:160px;
/*-webkit-transition: all 0.7s ease;*/
transition: all 0.7s ease;
}
<section class="voyages">
<a id="img_txt" class="anchorvyge" href="#">
<img class="imgvyge" src="https://unsplash.it/1600/900/?random" alt="vyge1"></img>
<p id="toto" class="text">YOPYOP</p>
</a>
</section>
I think your height is making the problem and you talked about this glitch that image jumped at the first place when you hover the mouse.just Make it 100% .hope it helps.
var x = document.getElementById("img_txt");
// if (x) {
x.addEventListener("mouseover", func, false);
x.addEventListener("mouseout", func1, false);
// }
function func()
{
document.getElementById("toto").setAttribute("style", "display:block;")
}
function func1()
{
document.getElementById("toto").setAttribute("style", "display:none;")
}
.voyages {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 20px 0px 10px 0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
img.imgvyge {
border-radius: 50%;
object-fit: cover;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
margin: auto 30px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.imgvyge:hover {
width: 400px;
height:400px;
}
p.text {
display: none;
z-index:100;
position:relative;
color:black;
font-size:24px;
font-weight:bold;
left:130px;
bottom:160px;
/*-webkit-transition: all 0.7s ease;*/
transition: all 0.7s ease;
}
<body>
<section class="voyages">
<a id="img_txt" class="anchorvyge" href="#">
<img class="imgvyge" src="https://unsplash.it/1600/900/?random" alt="vyge1"></img>
<p id="toto" class="text">YOPYOP</p>
</a>
</section>
</body>
Related
I'd like to understand why some parameters work with transiton and some don't. I have a button that brings up a div. If I only use max-height as a parameter then the transition works fine. When I insert other parameters such as opacity, top, etc... These only work on entry and never on closing. What am I doing wrong ?
You can see here that when you click the button for the first time, the transition works, when you click it the second time. the outbound transition does not work. The element disappear instantly.
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Close</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars">Open</i>';
}
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33!important;
font-weight: 500!important;
font-size: 13px!important;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
color: #fff;
}
.txt_button {
margin-left: 10px;
color: #fff;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
color: #fff;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #fff;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.mts_dropdown_box {
position: absolute;
margin-top: 17px;
}
.padds {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
position:relative;
}
.mts_dropdown_content.show {
max-height: 100vh;
opacity: 1;
top: 0;
transition: max-height 0.2s ease-in;
transition: opacity 0.2s ease-in;
transition: top 0.2s ease-in;
}
.mts_dropdown_content:not(.show) {
max-height: 0;
opacity: 0;
top: -40px;
transition: top 0.2s ease-out;
transition: max-height 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="mts_dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="padds">
<span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
<span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
</div>
</div>
</div>
</div>
By setting multiple times "transition", you're overriding the previous one.
If you want multiple transitions, set it once with all your transitions separated with a comma:
transition: top 0.2s ease-out, max-height 0.2s ease-out, opacity 0.2s ease-out;
Or use "all":
transition: all 0.2s ease-out;
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
How can I animate a height change after changing the height with javascript?
Do you can use Tranform scale and transition, in this case scaleY(). See an example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
text-align: center;
font-size: 14px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 4rem;
line-height: 5rem;
margin: 4rem;
}
.container {
margin: 4rem auto;
width: 90%;
max-width: 60rem;
}
p {
line-height: 2.2rem;
}
p:not {
margin-bottom: 2rem;
}
.btn {
bg: #09c;
background: #09c;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 1.4rem;
padding: 1.5rem 3rem;
transition: background .2s;
width: 100%;
}
.btn:hover, .btn:focus {
background: darken(bg, 15%);
}
.btn:in {
background: darken(bg, 50%);
}
.box {
background: #e5e5e5 ;
margin-left: auto;
margin-right: auto;
padding: 3rem;
text-align: left;
transform: scaleY(0);
transition: transform .3s;
transform-origin: top left;
}
.box.in {
transform: scaleY(1);
}
</style>
</head>
<body>
<h1>Animated height with CSS transitions</h1>
<div class='container'>
<button class='btn'>Click me</button>
<div class='box'>
<p>
Some text here!
</p>
</div>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function (event) {
event.currentTarget.classList.toggle('in')
document.querySelector('.box')
.classList.toggle('in')
})
</script>
<body>
<html>
Example without JS
<div class="accordion">
Hover for height animate
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
body{
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion{
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
&:hover{
// max-height technique
.accordion-content{
// If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
max-height: 300px;
}
}
}
.accordion-content{
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
// "height: 0" not work with css transitions
max-height: 0;
}
.accordion-inner{
padding: 0 15px;
}
.accordion-toggle{
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #fff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: center;
text-decoration: none;
&:hover{
background: darken(#00b8c9, 15%);
}
}
I'm trying to make a text Display on mouseover but i cant and i dont know how!
i tried many css codes but i failed.
And also i'm learning javaScript and i want to know how to do it with js
please see my code and help me slove my problem
Thanks and sorry if I'm making some rookie mistake
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.Time{
border-radius: 1000px;
margin-right: 20px;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Time:hover {
-webkit-filter: blur(5px);
cursor:pointer;
}
<img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"></div></li>
Here's a solution without javascript.
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.Time{
border-radius: 1000px;
margin-right: 20px;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.TimeTooltip {
display: none;
position: absolute;
top: 90px;
left: 90px;
}
.wrap:hover .Time {
-webkit-filter: blur(5px);
cursor:pointer;
}
.wrap:hover .TimeTooltip {
display: block;
}
<li><div class="wrap"><img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"><span class="TimeTooltip">tooltip</span></div></li>
see below code snippet, if you want to show text besides image on hover.
call();
function call() {
document.getElementsByClassName('Time')[0].addEventListener("mouseover", Show);
document.getElementsByClassName('Time')[0].addEventListener("mouseout", hide);
}
function hide() {
document.getElementsByClassName('imageText')[0].style.display = 'none';
}
function Show() {
document.getElementsByClassName('imageText')[0].style.display = 'block';
}
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.Time{
border-radius: 1000px;
margin-right: 20px;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Time:hover {
-webkit-filter: blur(5px);
cursor:pointer;
}
.imageText {
display: none
}
<img src="img/13.jpg" alt="EX" width="200" height="200" class="Time"></div></li>
<span class="imageText">text</span>
Im just curious to know the best practice for either toggling a class or just adding and removing it during a mouseenter/mouseleave state using jquery. Both seem to work fine im just not to sure which is best to go with.
Thank you
$('#image1').mouseenter(function() {
$('#image1').toggleClass('transform');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
$('#image1').mouseleave(function() {
$('#image1').toggleClass('transform show-images-text');
$('#image1 .images-color-overlay').toggleClass('transparent');
$('#image1 .images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>
Well a lot of this style question get shot down here on SO, because it seems it comes down to preference. But HERE is a way to do it all without javascript, only CSS, which some might consider more efficient.
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
#image1:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#image1:hover .images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.images-color-overlay:hover {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>
Your code is technically fine, however you can shorten it to just use the hover() method, as the function you provide will be called for both mouseenter and mouseleave events.
You can also use the this reference in the function to save DOM accesses, and also cache the jQuery object created from $(this) in a variable for re-use. Try this:
$('#image1').hover(function() {
var $image = $(this).toggleClass('transform');
$image.find('.images-color-overlay').toggleClass('transparent');
$image.find('.images-text').toggleClass('show-images-text');
});
.images-color-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images {
width: 33.333%;
float: left;
overflow: hidden;
position: relative;
}
#image1 {
background-image: url("http://placehold.it/1000x320");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.images-text {
text-align: center;
width: 100%;
position: absolute;
bottom: -20px;
color: #fff;
font-size: 10px;
line-height: normal;
-webkit-transition: all 1s;
transition: all 1s;
}
.show-images-text {
-webkit-transition: all 1s;
transition: all 1s;
bottom: 20px;
}
.transform {
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.transparent {
background-color: rgba(0, 0, 0, 0) !important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
<div id="image1">
<div class="images-color-overlay">
<p class="images-text">hidden-text</p>
</div>
</div>
</div>
The toggleClass is the bast practice in your case.
Internally it's also doing same thing if the class exist then remove it and if not then add it. See it yourself , goto this github link and search for toggleClass.
// Check each className given, space separated list
if (self.hasClass(className)) {
self.removeClass(className);
} else {
self.addClass(className);
}
I can't figure out whats wrong with it.. it worked fine before, I don't now what I changed to make it break.. The jQuery should be correct and the cdn works as well..
check my pen: http://codepen.io/mathiasvanderbrempt/pen/oXMJRr
HTML:
<div class="header">
<p class="covertxt">INTERIEURINRICHTING <br> & SCHRIJNWERKERIJ</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
CSS:
.header {
background:#333;
z-index: 5;
margin: 0 auto;
width: 80%;
max-width: 500px;
top: 30vh;
/*absolute centering*/
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #fff;
}
.header img {
width:100%;
}
.header p {
font-size: 22px;
font-family: montserratlight;
letter-spacing: 0.4em;
line-height: 1.3em;
text-transform: capitalize!important;
cursor: default;
text-align: center;
-webkit-transition: all 1.25s ease-in-out;
-moz-transition: all 1.25s ease-in-out;
-ms-transition: all 1.25s ease-in-out;
-o-transition: all 1.25s ease-in-out;
transition: all 1.25s ease-in-out;
}
jQuery:
$(document).ready(function() {
var delay = 3000; //3 seconds
setTimeout(function() {
$('.header p').fadeOut(300, function() {
$(this).text("A LIFESTYLE FOR EVERYONE").fadeIn(300);
});
}, delay);
console.log("replaced");
});
I'm not entirely sure what you're trying to do but commenting out all the xxx-transition properties makes the text fade.
See corrected pen