It seems simple but for some reason won't work. I need Image 2 to work as a rollover and be centered in the middle of the first one but on top of it. I have this so far:
.image1 {
z-index: 1;
top: 10vh;
width: 100%;
position: static;
}
.image2 {
z-index: 3;
margin-left: auto;
margin-right: auto;
padding; 4vh;
position: fixed;
}
<div>
<img class="image1" draggable="false" src="https://icdn2.digitaltrends.com/image/google-campus-hq-headquarters-home-offices-720x720.jpg?ver=1.jpg" alt="Alt Tag">
<img class="image2" src="https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955" onmouseover="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/25/Google_2015_%28Black%29.svg/revision/latest?cb=20171130074159'" onmouseout="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955'">
</div>
Image one displays fine but image 2 displays below it or on top of the content that's below instead of on top of the image. I'd rather use CSS to do this than JavaScript but can't really find a way for either when it's a rollover?
Thanks in advance.
Edit;
like this:
How It Should Look
The following will do:
.parent {
max-width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.image1 {
max-width: 100%;
}
.image2 {
position: absolute;
margin: auto;
max-width: 65%;
}
#media (min-width: 600px) {
.image2 {
max-width: 600px;
}
}
body {
margin: 0; /* cancel default 8px margin on SO */
}
* {
box-sizing: border-box; /* make elements include paddings in width/height */
}
<div class="parent">
<img class="image1" draggable="false" src="https://icdn2.digitaltrends.com/image/google-campus-hq-headquarters-home-offices-720x720.jpg?ver=1.jpg" alt="Alt Tag">
<img class="image2" src="https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955" onmouseover="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/25/Google_2015_%28Black%29.svg/revision/latest?cb=20171130074159'"
onmouseout="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955'">
</div>
The important part is position:relative on parent and position:absolute on second child, the rest are just some max-values to make sure they are resized on narrower screens and some centering (both vertical and horizontal) on parent.
A few more pointers:
neither draggable="false" or position:static are needed, as they're default values. But they're not wrong.
you also don't need z-index at all here, as any item is rendered above its preceding siblings, in case they overlap (except when one of them is positioned (has a set position value, other than static) and the other one is not, in which case the positioned one is on top.
There looks like there are a few issues here. I think this is what you are looking for.
For your div, give it a relative position. Then, for each image, give them an absolute position. At that point the images should sit ontop of each other and there positioning will be absolute to the div and not the body.
ex.
div {
position: relative;
}
.img1 {
position: absolute;
z-index: 1;
}
.img2 {
position: absolute;
z-index: 2;
}
<div class="parent" style="background-image:url('https://icdn2.digitaltrends.com/image/google-campus-hq-headquarters-home-offices-720x720.jpg?ver=1.jpg');">
<img class="image2" src="https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955" onmouseover="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/25/Google_2015_%28Black%29.svg/revision/latest?cb=20171130074159'"
onmouseout="this.src='https://vignette.wikia.nocookie.net/logopedia/images/2/28/Google_2015.svg/revision/latest?cb=20170804092955'">
</div>
Can you just add the picture as background for the div?
Related
So I have an issue and despite spending on research a while now I still cannot figure out what I am doing wrong.
Consider the following:
/* Main row */
.main-row {
width: 100%;
display: inline-flex;
z-index: -1;
position: relative;
}
.spacer {
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
and HTML
<div class="main-row">
<div class="main-row left-pane">
<h1 class="main-row title">Changing The Way</h1>
<p class="main-row subtitle">We understand <a>intelligent</a>telecommunication</p>
</div>
<div class="main-row right-pane">
<img src="<?php echo base_url("assets/vid/ai_brain.gif");?>" />
</div>
</div>
<div class="spacer"></div>
I am expecting to see the spacer (with some fancy graphics) to overlay the main row but this isn't happening. The position is specified, the z index is set correctly, the two divs are independent of each other. Whatever I do the graphic still is displayed below the main-row div
I think you're confusing background-position and element positioning. Background positioning changes the position of your background relative to wherever the element is on the screen. The background is still contained by the element, and otherwise does not affect the element's size or position on the screen.
Everything will overlap if you adjust the actual position of the spacer, like so:
.spacer {
top: -200px; /* This */
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
In the first image you can see the logo is positioned correctly but when I change resolution:
But when you try it on different resolutions it gets out of the box:
I just want that when I resize the browser or try in a different resolution, the logo will stay inside the box.
<div class="images">
<a href="https://www.csgolive.com/affiliates">
<img src="images/CSGOLive.png" alt="" width="165px" height="63px" style="display: inline-block;no-repeat center fixed; max-height 3.52%: ; max-width: 8.6%; position: absolute; right: 70.5%; bottom: 77%; min-height: 63px; min-width: 165px; height: auto; width: auto;">
</a>
To apply different styles when the resolution is above or below a certain threshold, you need to use #media queries in your css.
You can either include a conditional document like this:
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
Or add specific styles in the same document like this:
<style>
#media (max-width: 700px) {
.gun_icon {
margin-bottom: 100px;
}
}
</style>
This should get you where you need to go:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
if you use position: absolute, you must add position:relative; to your parent container.
You are positioning it absolute which takes the image out of the layout flow.
I'd suggest positioning it absolute to it´s relative parent with px coordinates to avoid percentage/flexible units alterations.
Resizable Fiddle
You have several CSS syntax errors on your inline styles, try to move them to external stylesheet.
Like this:
.images {
/* these 2 just for demo */
border: 1px solid red;
height: 110px;
/* new */
position: relative;
}
img {
display: inline-block;
background: no-repeat center fixed;
position: absolute;
/* new */
left: 20px;
top: 20px;
min-height: 63px;
min-width: 165px;
height: 63px;
width: 165px;
}
Clean up your HTML, like this (assuming later on you'd close .images with a </div> tag):
<div class="images">
<a href="https://www.csgolive.com/affiliates">
<img src="https://placehold.it/200x200" alt="">
</a>
Sizes (red border & .images height is set just for reference):
What I am trying to accomplish:
- create a pop-up div (fixed), centered in view
- this pop-up should be 60% height of the browser window
- the contents of the pop-up should be an image and a 'x' above the upper right corner of the image
- the height of the image should be maximal, considering it should be contained in the div together with the 'x'
- the aspect ratio of the image should be maintained
I tried the following code
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>
With CSS:
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
text-align: right;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
This code is not solving the problem, the image is not contained in the (yellow) div, as can be seen in the following screen shot:
http://www.michielvisser.nl/tmp/screenshot.jpg
How to contain the image in the div with maximal height for the image in the div and maintain aspect ratio?
SOLUTION 1: Remove the height and width from .pop-up and change height:100% in .image to height:60vh. That works perfectly. Apparently the child (img) will not adjust to the parent (div), but the parent (div) will adjust to the child (img). Sounds like real life.
SOLUTION 2: Essentially the problem arises when the window is resized (except in firefox). The solution can be to redraw the image after a resize, this solves the problem:
$(window).resize(function(){
$('img').hide();
setTimeout(function(){ $('img').show(); }, 1);
});
Your problems are:
You have an inline width and height set on your image, which is overriding the CSS styles for width and height on that image
The margin from your X is pushing the image down since the X is wrapped in a <p> tag.
You don't need object-fit at all.
The simple way to solve #1 is to delete the inline width and height from the image tag and leave it to the stylesheet.
Number 2 can be solved by wrapping the X in a div instead of a p, or you can use a pseudo element for it. I have taken the latter approach in the snippet below.
To solve #3, just delete the style from the stylesheet. (Having this property set in Safari actually messed things up for me.)
This snippet is tested in Safari 10.1.1. Note how the placeholder image is quite large by default (1000x800), but it only displays as big as it can per the parent div.
Edit: Based on your comments, let's revise this further so that we dictate the size on the image, and just let the wrapper take up the size of the image.
So on our image, in order to get it to be 60% as tall as the screen, we can do:
img {
height: 60vh;
width: auto;
}
Then, in our parent, we won't specify a width or height at all, but we can do display: flex just to make sure it is big enough to fit its contents.
body {
background: #333;
}
.pop-up {
display: flex;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: yellow;
}
.exit {
color: black;
text-decoration: none;
text-align: center;
font-size: 300%;
display: block;
position: absolute;
top: -50px;
right: -40px;
width: 40px;
height: 50px;
}
.image {
height: 60vh;
width: auto;
opacity: 0.7;
}
<div class="pop-up">
X
<img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>
I put the image above the P tag and added some CSS to .exit-button and .image
From here you can adjust padding and sizing of the elements.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
position: absolute;
text-align: right;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
<p class="exit-button">x</p>
</div>
I copied your code and edited it. Please tell me whether this is the output you wanted or not.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
padding-top: 30px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
margin-top: -50px;
text-align: right;
margin-right: 0;
font-size: 300%;
}
.image {
margin-top: -20px;
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" alt="" title="" />
</div>
Because of either needing to hardcode in the alignment of the image given the size or deal with weird convolution, I believe this is the best way:
Create a fixed overlay occupying the entirety of the screen, create a container of 60% height, align it in the center with flexbox and stick the image inside making it occupy the entire height. The aspect ratio will update automatically (only happens with height).
As for the button – give it absolute positioning and a right position of 0, and manually give the parent relative positioning (this is necessary).
<div id="popup">
<div id="container">
X
<img src="https://i.redd.it/gelilvo30mgz.jpg">
</div>
</div>
html,
body {
height: 100%;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative; !important // has to be specified for the children (anchor) to find the bound
height: 60%;
background: #333;
}
a {
right: 0;
position: absolute;
}
img {
height: 100%;
}
https://jsfiddle.net/L2nLjjxc/1/
I believe that's the least amount of convolution if you want it to be dynamic.
I found a nice tutorial for making my images enlarge (like a zoom effect) on hover. The main difference between my needs and a tutorial is that I want my all images contained in a single box like container. So when I implemented the tutorial I realize that part of the enlarged image gets cut off when you hover. The effect is constrained to the container. I would like a way for the zoom to go wherever it needs to go on the page. (So you can see the whole zoomed image)
Here is my implementation of the tutorial: http://mulnix.contestari.com/wp/example225/1.php
JSFiddle: http://jsfiddle.net/dsRAH/
Original Code
Remove the overflow: hidden and all other overflows,
than for your images containers DIV remove float:left; and add display:inline-block;
* {
margin: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
background: #000;
color: #fff;
z-index: 0;
}
.photos {
position: relative;
display: flex;
flex-flow: row wrap;
}
.photo {
box-shadow: 0 0 0 2px #444;
margin: 5px;
position: relative;
max-height: 200px;
transform: translateZ(0);
transition: transform 0.5s;
}
.photo:hover {
z-index: 1;
transform: translateZ(0) scale(1.6);
}
.photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-legend {
position: absolute;
bottom: 0;
width: 100%;
padding: 1em;
background: rgba(0,0,0,0.3);
}
<div class="wrapper">
<div class="photos">
<div class="photo">
<img src="https://placehold.it/200x150/0bf" />
<div class="photo-legend">TEST DESCRIPTION</div>
</div>
<div class="photo">
<img src="https://placehold.it/200x200/f0b" />
</div>
<div class="photo">
<img src="https://placehold.it/200x150/bf0" />
</div>
</div>
</div>
It's not perfect but it's a start. I changed the overflow:hidden; in the wrapper to visible. I also put your code into jsfiddle so people can tinker with it.
http://jsfiddle.net/m8FXH/
You can try to use z-index. An element with greater z-index is always in front of an element with a lower z-index. If you main container is not overflow:hidden than you can try this out.
here is an example where you can see how it works. Hope that is helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I would suggest giving your divs one of the following classes:
colleft for the ones that are at left column
colright for the ones that are at right column
rowtop for the ones at the top row
rowbottom for the ones at the bottom row
And then assign them the following properties
.colleft {
transform-origin-x: 0%;
}
....
transform-origin-x: 100%;
transform-origin-y: 0%;
transform-origin-y: 100%;
(respectively)
That will make the zoom go in the desired direction.
evan stoddard modified fiddle