I want a overlay on an image, that goes up to the mouse height.
w3schools has a nice demo of an image overlay here, that goes a long way to what I want.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom
Here the overlay height is defined as
.container:hover .overlay {
height: 100%;
}
Is there a way to do define the height so that it goes up to the height of the image, assuming the mouse is over the image?
you can get this behavior using jQuery
$("div.container").mousemove(function(e){
var avatarImg = $("#avatar");
var avatarPosition = avatarImg.offset();
var mousePositionX = e.pageX - avatarPosition.left;
var mousePositionY = e.pageY - avatarPosition.top;
var overlayNewHeight = avatarImg.height() - mousePositionY;
$("div.overlay").height(overlayNewHeight);
});
$("div.container").mouseleave(function(){
$("div.overlay").height(0);
});
.container {
position: relative;
width: 50%;
margin-left: 100px;
margin-top: 100px;
border: black solid 1px;
}
#avatar {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://i.imgur.com/I80W1Q0.png" alt="Avatar" class="image" id="avatar">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</body>
Related
/*when you click on the picture it should open an overlay, which closes if you click anywhere*/
<script type="text/javascript">
function on() {document.getElementById("over1").style.display="block";}
function off() {
document.getElementById("over1").style.display = "none";
}
function on() {document.getElementById("over2").style.display="block";}
function off() {
document.getElementById("over2").style.display = "none";
} </script>
<style>
.container{
background-color: #94AB98;
height:370px;
width:280px;
margin: 30px;
margin-bottom: 60px;
float: left;
display: inline-block;
}
.container .bildbt1{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic1);
}
.container .bildbt2{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic2);}
#over1{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#over2{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#text1{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
#text2{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
</style>
/*those are my containers, with buttons*/
<body>
<div class="container">
<div id="over1" onclick="off()">
<a id="text1">some text</a></div>
<button class="bildbt1" onclick="on()">
</button>
<h2>text too</h2>
</div>
<div class="container">
<div id="over2" onclick="off()">
<a id="text2">
also text</a>
</div>
<button class="bildbt2" onclick="on()"></button>
<h2>and there is also text</h2>
</div>
</body>
It only shows Overlay 2, i tried various options but it doesn't work.
Can you help me?
I'don't know why I can't poste this question...
It looks like your post is mostly code; add some more details...
i think there are enough details.
I have a pop-up div that is able to stream video or show a document/image depending on the file attachment.
The issue I'm having is ensuring that it is centered vertically and horizontally, both for Desktop and mobile browsers/app.
I've been trying different attributes, but it's like I change from what I already have and suddenly it's just off the page.
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><img id="VideoLauncher" width="600" src="'+file+'" onclick="lightbox_close()"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "pdf" || extension === "doc" || extension === "docx"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><iframe src="https://docs.google.com/gview?url='+file+'&embedded=true" style="height:800px; width:600px;" frameborder="0"></iframe></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
var BoxCloseEle = document.querySelector("#boxclose");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -200px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';
Ideally, what I'm looking for is the styling that will dynamically center the light element, horizontally and vertically, though the light element will be a different size depending on the file it is to show. Because of this I can't simply hard code the height and width.
There are two ways to doing this:
.lightbox {
margin: 0 auto;
}
This only centers horizontally within the parent component. It is a very simple way if that's what you want to do.
If not, try this:
.lightbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
A popular approach to vertically and horizontally center elements is to use:
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
You can use this with absolute or fixed positioning . top and left moves the top left corner to the center of the screen while translate( -50%, -50% ) moves the element back to the left and top 50% of the elements width/height, placing the center of the element at the center of the page.
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
/* For Demo */
width: 75vw;
height: 75vh;
background-color: #ccc;
}
<div class="box"></div>
Use Flexbox:
main {
background-color: teal;
}
.modal-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
}
.modal {
display: block;
max-width: 300px;
width: 90%;
max-height: 300px;
height: 90%;
background-color: white;
}
<main>
<div class="modal-container">
<div class="modal">
<h2>yes</h2>
</div>
</div>
</main>
I have the vertical label "PINK" aligned in the middle of a section.
When I scroll down to the next section the "PINK" is being covered by the next section which is having an higher z-index.
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1 {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>
</body>
</html>
I would like to have a second title "BLUE" in the second section to appear as shown in the following mockup.
Is it possible to arrange the z-indexes to achieve this result?
Is there another better way to clip the labels, keeping their alignment at 50% of the viewport?
Thanks a lot in advance for any contribution!
Try this code
since you tagged jquery,i used it to add class fixed
$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
$('.blue-text').show();
if($('.blue').offset().top <= $('.pink-text').offset().top){
$('.blue-text').addClass('fixed');
}
}
else{
$('.blue-text').removeClass('fixed');
$('.blue-text').hide();
}
});
});
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1.fixed {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
.blue,.pink {
position: relative;
}
.text1 {
position: absolute;
top: 10px;
z-index: 31;
transform: rotate(-90deg);
background-color: #FFFFFF;
}
.text1.blue-text.fixed{
z-index: 31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>
i am trying to create a web presentation and wanted to a add a little Animation of 2 Halfes which moves up and down on a Click (which works so far) but i also want them to stay there after the click.
standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg
0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg
after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg
This is my Code for that: HTML
<body>
<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>
</div></a>
and then made the animation with:
#btn_logo:active #up
and
#btn_logo:active #down
How could i make the animation toggled after it ended?
What you should do is have it animate on a CSS class, and then simply add or remove a CSS class on click.
Like so: https://jsfiddle.net/8troo8bw/1/
(or so with your exact html): https://jsfiddle.net/8troo8bw/2/
The key here being the animation:
#up, #down {
background: #000;
position:absolute;
right:0;
left:0;
width:100%;
height:25px;
transition: top 0.25s;
}
#up.moveUp {
top: 25px;
}
#down.moveDown {
top: 100px;
}
And the relevent JS to add the class:
$('#click').on('click', function(){
$('#up').addClass('moveUp');
$('#down').addClass('moveDown');
});
Do something like this:
$(document).ready(function(){
$('#animation').on('click', function() {
$('.up,.down').addClass('animated');
});
});
#animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: yellow;
}
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
margin: 0 auto;
}
.up {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
background: green;
}
.down {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.up.animated {
bottom: 100%;
top: -50%;
transition: all 1s linear;
}
.down.animated {
top: 100%;
bottom: -50%;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animation">
<div class="up"> </div>
<div class="down"> </div>
<div class="logo"> </div>
</div>
When i hover once, transition is proper, but on second time, transition becomes wierd, as if the perspective: 800px starts working after transition has taken place.
Please also tell how can i set rotation about an edge except center.
I know about transform-origin but nothing such as transform-axis.
I want that when i hover over the , these images should open like a window.
var left=document.getElementById("left");
var right=document.getElementById("right");
function curtain() {
left.style.transform="rotateY(70deg)";
right.style.transform="rotateY(-70deg)";
}
function back() {
left.style.transform="rotateY(0deg)";
right.style.transform="rotateY(0deg)";
}
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
<html>
<head>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
<script src="script/script.js"></script>
</body>
</html>
There seems to be an issue with perspective and the onmouseout. back() (in onmouseout) and curtain() (in onmouseover) are called quite inconsistently. onmouseout is called whenever the mouse moves outside the element (#animate in this case) or its children (the images). The children are animated - they move - and the onmouseout is thereby called multiple times.
I wouldn't recommend onmouseover / onmouseout for this - instead I would use CSS :hover.
That aside, transform-origin defines the center of rotation.
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
#animate {
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position: absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: left;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: right;
}
<div id = 'animate'>
<div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div>
<div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div>
</div>
I don't know the origin of the problem, but it works ok if you are using CSS hover instead of JS hover.
And the transform origin is the way to go, it does what your wanted transform-axis would do.
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: left center;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: right center;
}
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>