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>
Related
I designed a vertical slide from bottom navigation on mobile. I would like each tab could move (up or down) with the upper one. May be the toggle method isn't the right one. I use vanilla JS.
Here is my function. The two last lines are to show the idea. I would like to write it in a better way.
let children = document.getElementById('mobile-container').children;
for (let i = 0; i < children.length; i++) {
children[i].addEventListener("touchstart", function () {
children[i].classList.toggle("unfold");
children[i-1].classList.toggle("unfold");
children[i-2].classList.toggle("unfold");
});
}
Here is my HTML
<div id="mobile-container">
<div id="mobile-projets" class="mobile">
<h2>Projets</h2>
</div>
<div id="mobile-expertises" class="mobile">
<h2>Expertises</h2>
</div>
<div id="mobile-clients" class="mobile">
<h2>Clients</h2>
</div>
</div>
Here is my CSS
#mobile-container {
display: block;
position: relative;
width: 100%;
height: 85vh;
top: 15vh;
}
#mobile-projets {
width:100%;
height: 100%;
background: #00A6C6;
text-align: center;
border-radius: 1em 1em 0 0;
position: absolute;
top: 69vh;
}
#mobile-expertises {
width:100%;
height: 95%;
background: #FFFFFF;
color: black;
text-align: center;
border-radius: 1em 1em 0 0;
position: absolute;
top: 74vh;
}
#mobile-clients {
width:100%;
height: 90%;
background: #00A6C6;
text-align: center;
border-radius: 1em 1em 0 0;
position: absolute;
top: 79vh;
}
#mobile-projets.unfold {
top: 0;
transition: all 1s ease;
-webkit-transition: all 1s easeout;
-moz-transition: all 1s easeout;
-ms-transition: all 1s easeout;
-o-transition: all 1s easeout;
}
#mobile-expertises.unfold {
top: 5vh;
transition: all 1s ease;
-webkit-transition: all 1s easeout;
-moz-transition: all 1s easeout;
-ms-transition: all 1s easeout;
-o-transition: all 1s easeout;
}
#mobile-clients.unfold {
top: 10vh;
transition: all 1s ease;
-webkit-transition: all 1s easeout;
-moz-transition: all 1s easeout;
-ms-transition: all 1s easeout;
-o-transition: all 1s easeout;
}
I wrote this code below as an audio player, i want to make it work by javascript but i don't know where to start? i want to have a play and pause option and nothing more! since i'm new to javascripts i dont know how can i make it work on this!
How can i write a javascript for this audioplayer?
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>
You mean something like this?
window.addEventListener("load",function() {
document.querySelector(".playy").addEventListener("click",function() {
document.getElementById("tune").play();
this.style.display="none";
document.querySelector(".pausee").style.display="block";
})
document.querySelector(".pausee").addEventListener("click",function() {
document.getElementById("tune").pause()
this.style.display="none";
document.querySelector(".playy").style.display="block";
})
})
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>
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 have a problem that CSS3 transitions doesn't work on child elements when adding a class to a parent.
Here's my code:
http://jsfiddle.net/4zwg3/327/
Image doesn't get animations and instantly goes to 50px height.
CSS:
.header {
height: 400px;
width: 400px;
background: blue;
}
.small_header img {
height: 50px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small_header {
height: 100px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
HTML:
<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>
Javascript:
var click = 1;
$( ".header" ).on( "click", function() {
console.log('works');
if (click == 1) {
$(".header").addClass("small_header");
$(".small_header").removeClass("big_header");
click = 0;
} else {
$(".header").addClass("big_header");
$(".small_header").removeClass("small_header");
click = 1;
}
});
But as you can see there's no transition animations on image.
How can it be fixed?
This issue because the image doesn't have any start height and browser can't calculate the transition, and if you add transition on the small_header class, the transition works only when the image shrinks.
$( ".header" ).on( "click", function() {
$(".header").toggleClass("small_header");
});
.header {
height: 400px;
width: 400px;
background: blue;
}
.header img {
height:200px;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small_header img {
height: 50px;
background-size: auto 100%;
}
.small_header {
height: 100px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>
first of all, I would avoid that handling with these two classes and the "click" variable.
Your JS should look more like:
$( ".header" ).on( "click", function() {
console.log('works');
$(".header").toggleClass("small");
});
Than your CSS should look like this:
.header {
height: 400px;
width: 400px;
background: blue;
}
.small {
height: 100px;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small img {
height: 50%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
Try it:-
#someDiv{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
It can't be animated, because CSS knows nothing about your start size of image. You should add image size for calculation of animation:
.header img {
height: 400px;
}
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>