So what I'm trying to do is have an SVG overlay on an image on hover. Eventually I will animate it, but for now I'm just trying to get the overlay working. This is what I tried:
<div class="centering margin-on-top">
<img id="img1" src="media/circle-1.jpg" />
<img id="img2" src="media/circle-2.jpg" />
<img id="img3" src="media/circle-3.jpg" />
</div>
CSS:
#img1:hover {
background: url("../svg/stroke-ears.svg") no-repeat;
}
At first I thought it wasn't working at all. But then when I put the hover on the containing div instead and deleted the picture inside the "inspect element" window, the svg was there but hidden underneath the image.
Is there a way for me to maybe set a z-index on the image or the background?
Thanks in advance.
Change your CSS to this:
#img1 {
position: relative;
}
#img1:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("../svg/stroke-ears.svg") no-repeat;
}
What you're doing is creating a pseudo-element to overlay on top of the img. Your original img had the background applied to the background of the img as opposed to overlaying it.
This new solution creates an element outside the normal DOM that will treat your img as a container and cover the entirety of its dimensions with an element that has the original background you wanted applied.
Update
JSFiddle example
So, silly me, trying to treat imgs as containing elements. Here's the fix.
HTML
<div class="inline-container centering margin-on-top">
<div class='img-holder'>
<img id="img1" src="http://placehold.it/200x200" />
</div>
<div class='img-holder'>
<img id="img2" src="http://placehold.it/200x200/FBC93D" />
</div>
<div class='img-holder'>
<img id="img3" src="http://placehold.it/200x200/075883" />
</div>
</div>
CSS
.inline-container {
font-size: 0;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder:hover:after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
background: url("http://placeskull.com/200/200") no-repeat;
}
You could easily swap the images to be background images on the new div, too, if you wanted to shorten up your HTML.
Related
I'm trying to make a div draggable. The div contains an img and some text that serves as a label for the image. The problem is that when I start the drag by clicking on the img, the img gets dragged, and not the parent div. How do I fix that?
<div className="container-selected" id={id} draggable="true" onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}>
<img src={imgSrc} />
<span className="item-id">Some text</span>
</div>
Here's the CSS:
.container-selected {
padding: 10px;
position: relative;
z-index: 0;
img {
width: 3em;
z-index: -1;
}
.item-id {
position: absolute;
left: 0;
top: 53px;
width: 100%;
text-align: center;
}
}
This is many years later, but I ran into the same problem, and finally figured it out.
An image is draggable by default, so when you drag an image in a div, the image gets dragged. All you have to do is the make the image non-draggable by:
<img draggable="false" src={status} />
Now when you drag the div, the div and its contained image are dragged together.
You can use HTML5's drag and drop like this: https://jsfiddle.net/bv5fLrth/23/
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag1" draggable="true" ondragstart="drag(event)">
<img id="drag1" src="http://lorempixel.com/400/200/" />
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
Like many others I wanted to show an enlarged image when hovering over a thumbnail. I used a hover selector to enlarge the image which worked fine.
Instead of having the image shrink when I moved off the image, I wanted the image to shrink when I moved off area that was occupied by the original thumbnail which was 100px X 100px.
I put a div around it, sized it and put the :hover on it rather then the image. I thought because the enlarged image was positioned absolute it wouldn't enlarge the div.
The image still enlarges but it does not shrink unless the cursor moves off the enlarged image.
div.hov:hover >.thumbnail {
position:fixed;
top:100px;
left:50px;
width:800px;
height:auto;
display:block;
z-index:999;
}
div.hov{
width:101px;
height:101px;
float:left;
overflow:visible;
margin: 10px;
}
<p>
<div class="hov"><img src="./gm1.png" class="thumbnail" height="100" width="100" /></div>
<div class="hov"><img src="./gm2.png" class="thumbnail" height="100" width="100" /></div>
</p>
Is there any way to achieve this? The hosted version is here.
one way to do this is to show a new modal div on top of the original image. that way your original div doesn't enlarge. however, you'll need to use some javascript or jQuery
heres a fiddle to demonstrate: http://jsfiddle.net/k3oq1899/1/
don't mind the code, I put it together very quickly for you, but you can clean it up a bit.
html
<div class='image'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
</div>
<div id='modal'></div>
css
.image {
display: inline-block;
width: 100px;
height: auto;
}
img {
width: 100%;
height: 100%;
display: inline-block;
}
#modal {
display: none;
position: absolute;
top: 0;
left: 0;
}
jquery
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function (event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
if($('#modal').css('display') != 'none') {
$('#modal').css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
}
});
$('.image').on('mouseover', function() {
var image = $(this).find('img');
var modal = $('#modal');
$(modal).html(image.clone());
$(modal).css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
$(modal).show();
});
$('.image').on('mouseleave', function() {
$(modal).hide();
});
});
Instead of enlarging the image, think of actually creating two images, one big and one small one. Once you hover over the small one, you can make the big image visible or invisible when moving out of it.
use absolute positions, display:block and display:none and check if the z-index is right.
But is this really necessary?
The hovering does not seem convenient to me....
You can put an invisible DIV with same dimensions over the thumbnail, put it on top with z-index and use it for the hover-event. But you need a few lines of javascript (with jQuery in my example).
HTML
<div class="box">
<div class="thumbnail">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
<div class="overlay"></div>
</div>
<div class="large-image">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
</div>
</div>
Javascript (jQuery)
$('.overlay').hover(
function () {
$(this).closest('.box').addClass('show-large-image');
},
function () {
$(this).closest('.box').removeClass('show-large-image');
});
CSS
.box {
padding: 200px;
}
.thumbnail {
position: relative;
display: inline-block;
border: 1px solid #888;
}
.overlay {
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.large-image {
display: none;
position: absolute;
top: 0;
left: 0;
width: 500px;
}
.large-image img {
width: 100%;
}
.box.show-large-image .large-image {
display: block;
}
Example: http://jsfiddle.net/dx0d1ceh/
I am trying to align these four separate spliced images from an original image. I am doing this because each portion of the image has a separate link.
I have the images align. Now all I want to do is shrink the size of the images via width: #%;
For some reason this just isn't seeming to work.
Any help would be appreciated.
Here is a link to the CodePen: http://codepen.io/anon/pen/pvGgdp
.split,
.split2,
.split3,
.split4 {
display: inline-block;
margin: -2px;
}
.spliter {
margin-top: -3px;
}
<div class="splitWrapper">
<div class="split">
<a href="#">
<img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
</a>
</div>
<div class="split2">
<a href="#">
<img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
</a>
</div>
<div class="spliter"></div>
<div class="split3">
<a href="#">
<img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
</a>
</div>
<div class="split4">
<a href="#">
<img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
</a>
</div>
</div>
You could use background images and assign them to the a tags. I have amended your codePen here > http://codepen.io/anon/pen/YPBwJX
However, it may be better to just use one image, and overlay transparent a-tags, set them to display block and then you don't have to worry about the image lining up! Anyways, please see the code below for the question asked =)
.splitWrapper {
width: 850px;
margin: auto;
}
a.split1 {
background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
background: url('http://i.imgur.com/sMsHX14.png');
}
a.split{
width: 417px;
height: 300px;
float: left;
margin: 0;
padding: 0;
display: block;
background-size: 417px 300px;
}
.clear { clear: both; }
<div class="splitWrapper">
<div class="clear"></div>
</div>
I don't think you quite understand how % works in CSS. % means that percentage of the parent element. Also, for it to work, the parent element has to have a defined width. Here's the CSS changes you need:
.splitWrapper {
width: 100%;
}
.split, .split2, .split3, .split4 {
display: inline-block;
margin: -2px;
width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
max-width: 100%;
}
.spliter {
margin-top: -3px;
}
http://codepen.io/anon/pen/KwJVGQ
You'll need to adjust your margins accordingly. You should use percentage margins since you're working with percents. Just divide the width of the margin by the width of the element and multiply it by 100 to get your margin percentage.
Say I have a small transparent gif I want to align and scale over an image that can scale as the browser changes size. You might have guessed that yes, I want a seamless little animation over photograph such that a small portion of the photo seems to be animated.
Is this just too difficult for pure CSS? I'm already starting to do it in js, just seems complicated with CSS. So while I move on and do it with code, anyone have a funky CSS methodology by chance?
Tried something like this but for some reason the floater image scales with the browser (visible) percent, not the parent div containing the bg image.
<div id="bg-image">
<div class="bg-container">
<img class="photo" src="../images/bg_artist.jpg" alt=""/>
<img class="floater" src="../images/twitter.png" alt="" />
</div>
</div>
just pretend i want the child image to show in the lower right:
#bg-image .container
{
width:102%;
margin-left:-10px;
}
#bg-image .photo
{
width:102%;
margin-left:-10px;
}
#bg-image .floater {
position:fixed;
left:90%;
top:90%;
}
Well, after futzing around, the js solution is pretty simple:
var floater = document.getElementById("floater");
var photo = document.getElementById("bg-photo");
floater.style.left = photo.width * .9 +"px";
floater.style.top = photo.height * .5 + "px";
Sorry, I'd put it in a jsfiddle, but it's hard since it deals with the whole browser.
I'm a little unclear what you want the final behavior to be, but this has the images scaling and staying located in relation to each other.
HTML
<div id="bg-image">
<img class="photo" src="path/bkgimage.png" alt=""/>
<img class="floater" src="path/floatimage.png" alt="" />
</div>
CSS
#bg-image {
position: absolute;
width:100%;
left: 0;
top: 0;
}
#bg-image .photo {
width:100%;
}
#bg-image .floater {
position:absolute;
width: 10%;
height: 10%;
bottom: 0;
right: 0;
}
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.