<style type="text/css">
.xyz {
position: absolute;
top: 100px;
left: 140px;
z-index: -1;
}
#container {
position: relative;
overflow: hidden;
opacity: .2;
}
</style>
<body>
<div>
<video id="container" autoplay loop muted>
<source src="<%=request.getContextPath()%>/Files/images/sample.mp4" type="video/mp4">
</video>
<div class="xyz">
<a href="<%=request.getContextPath() %>/Files/jsp/Home.jsp">
<img src="<%=request.getContextPath() %>/Files/images/play.png" height="50" width="50"
onmouseover="this.src='<%=request.getContextPath()%>/Files/images/Koala.jpg'">
</a>
</div>
</div>
</body>
The anchor tag here is not working.
The image play.png should change to Koala.jpg on mouse over and when clicked Home.jsp should be displayed. But the code is working without div. Using anchor in div neither image is gettig changed using mouseover nor linking to Home.jsp.
Just remove z-index from the CSS . Changed code :
.xyz {
position: absolute;
top: 100px;
left: 140px;
}
Related
I have videos that play on hover but the overlays I use block this function. I'd like to have an opaque overlay with text pop up over the video and it still plays on hover. So my question is how can I add a text and opaque overlay that doesn't block the play on hover.
reference: https://axisstudiosgroup.com/work/
I am using the following:
js:
jQuery(document).ready(function($){
var oPlayer = $("#" + this.id);
$('.work-grid .work-item').on('mouseenter', '.play-video', function(e) {
e.preventDefault();
oPlayer = $(this);
froogaloop = $f(oPlayer[0].id);
froogaloop.api('play');
}).mouseleave(function() {
froogaloop = $f(oPlayer[0].id);
froogaloop.api('pause');
froogaloop.api("seekTo", 0);
});
});
css:
.work-grid {
display: grid;
grid-row-gap: 25px;
width: 100%;
margin-bottom: 80px;
}
.work-item {
position: relative;
margin-top: 0px;
overflow: visible;
}
.work-wrap {
position: relative;
padding-bottom: 58.25%;
}
.work-item iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.125rem solid transparent;
}
.work-item img {
display: block;
height: auto;
max-width: 100%;
height: 100%;
width: 100%;
}
html
<div class="work-grid">
<div class="work-item">
<div class="work-wrap">
<a href="#">
<div class="work-item-overlay">
</div>
<div>
<iframe id="player1" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player1&title=0&byline=0&portrait=0&autoplay=0&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<h3 class="work-item-title">Title</h3>
</div>
</a>
</div>
</div>
Actually, this was solved by simply moving the overlay div to a different position.
<div class="work-item">
<div class="work-wrap">
<a href="example.com">
<div>
<iframe id="player29" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player29&title=0&byline=0&portrait=0&autoplay=0&muted=1&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<div class="work-item-overlay">
<h3 class="work-item-title">TITLE</h3></div>
</div>
</a>
</div>
</div>
In my HTML website I have a button, and I try add an transparent image over this button. And I can't click in this button after.
My problem is something like this:
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Thanks very much for your help!
To fix this you can set the z-index of the image lower than the a element (which defaults to 0)
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Alternatively you could use the image as a background on the container and avoid the need to position it absolutely, or have to change z-index at all.
you need to add a z-index to the button and give it position relative
.button {
z-index: 1;
position: relative;
}
Here is the code you need to use
html
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
Click here
</a>
css
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
.button {
z-index: 10;
position: relative;
}
See js fiddle here
You can alter width and height of image-container as you wish..
#container {
height: 400px;
width: 400px;
position: relative;
}
#image-container{
width:100%;
height:100%;
background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
background-position:center;
background-size:contain;
}
<div id="container">
<div id="image-container">
<a href="#">
Click here
</a>
</div>
</div>
I am trying to append a div using jQuery after an image and than place it in the middle of the image. so if this is the image
<div class="entry">
<img class="alignnone size-full wp-image-7711" src="http://some-source.com/img" alt="celebrity-girlfriends-6" width="728" height="382">
</div>
i append the div like this:
jQuery('.entry').find('img:first').after('<div id="test"></div>');
but is there a way to place the new div in the middle of the image?
thx
You can use position: absolute on #test and position: relative on parent div
$('.entry').find('img:first').after('<div id="test">Test</div>');
.entry {
position: relative;
display: inline-block;
}
#test {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
<img src="http://placehold.it/350x150">
</div>
I have a 2 iframe's one (iframe1) which is 100% of the page, and the 2nd (iframe2) hovers over the first one.
How can I set the height of the main body to that of iFrame1 so that the scroll bar is on the main page and the iframe2 is anchored to the top of the main page?
i do this to do some custom tracking but right now the iframe2 scrolls down when I scroll the content of iframe1 which is done in its on iframe
here is what i have so far:
<html>
<head>
<style>
body{background:#efefef; height:100%; padding-top:40px;}
#wrap{margin:20px 20px 50px;}
</style>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#iframe_1
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
#iframe_2
{
position:fixed; left:0; top:0; margin-top: 440px; margin-left: 425px; width:300px; height:500px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="iframe_1">
<iframe width="100%" height="100%" src="http://www.loudounsmilecenter.com/our-services.aspx" frameborder="0" allowtransparency="true" ></iframe>
</div>
<div id="iframe_2">
<iframe width="600px" height="600px" src="about:blank" frameborder="0" allowtransparency="true" ></iframe>
</div>
</div>
</body>
i want the iframe_2 to be over the "" section in iframe1. because they aren't same domain i have cross-domain issues so i have to do an overlay with iframe to track.
because the scroll is in iframe_1, iframe_2 doesn't anchor to that section
let me know if you have any ideas.
Live site- http://uposonghar.com/new-video/
If you hover YouTube video on that page you can see 2 sharing buttons appear. That is not working on IE.
That is working perfectly when i put iframe src blank but doesn't work when i put put youtube video link on iframe src. Check this- uposonghar.com/test/ie.html
HTML-
<div id="video-container" onmouseover="mouseoverBox1()" onmouseout="mouseoutBox1()">
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" style="border:1px solid #F00;background:#063;" width="600" height="400" allowfullscreen="" frameborder="0"></iframe>
<ul class="share-video-overlay" id="share-video-overlay">
<li class="facebook" id="facebook"><a class="shareNew" href="https://www.facebook.com/sharer/sharer.php?u=http://uposonghar.com/new-video/" target="_blank" onclick="return windowpop(this.href, 600, 400);" data-reveal-id="myModal">Facebook</a></li>
<li class="twitter" id="twitter"><a class="shareNew" href="http://www.twitter.com/share?&text=Check+this+video&url=http://uposonghar.com/new-video/" target="_blank" onclick="return windowpop(this.href, 600, 400);" data-reveal-id="myModal">Tweet</a></li>
</ul>
</div>
JS
<script type="text/javascript">
function mouseoverBox1(){
var myPara = document.getElementById("share-video-overlay");
myPara.style.display = "block";
}
function mouseoutBox1(){
var myPara = document.getElementById("share-video-overlay");
myPara.style.display = "none";
}
</script>
CSS-
#video-container {
display: block;
position: relative;
width: 600px;
height: 400px;
}
#video-container:after {
clear: both;
}
#share-video-overlay {
display: none;
position: absolute;
left: 0;
top: 150px;
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
Append wmode=transparent parameter to the iframe src: example
<iframe
width="600"
height="400"
src="//www.youtube.com/embed/-Jkd9GDSyPc?wmode=transparent"
frameborder="0" allowfullscreen="">
</iframe>