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>
Related
What I want to do is not fit the childs inside the parent, not want the children to be responsive I just want the parent fit the overall fixed width of his childs to then center it properly
What I'm trying to do is:
A widget that can be centered regardless of the contents inside, so if
there are 5 childs appears centered, if there's 10 stills centered
I'm trying to make a "responsive" div with a dynamically created div childs, with those being absolute because they need to overlap themselves a bit
The thing is, the parent doesn't seem to detect their childs at all when putting them on absolute
I know this is somewhat possible because when using overflow the parent knows somehow the overall width
Is there any way to make the outer parent div's width equal to the total's width of their childs?
Have been searching all damn morning reviewing lots of questions and none seemed to answer that, I'm aware that most surely this is not the better approach for this and will be kindly grateful knowing other methods
What I've GOT:
.grandparent{ position: absolute; width: 100%; height: 50%; bottom: 0; border: solid; }
.parent { position: absolute; width: 90%; height: 85%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }
.child { position: absolute; width: 100px; height: 150px; border: blue solid; }
<div class="grandparent">
<div class="parent">
<div class="child" style="transform: translate(0em, 16px) rotateZ(-20deg) rotateY(0deg);"></div>
<div class="child" style="transform: translate(3.6em, 21px) rotateZ(-10deg) rotateY(0deg);"></div>
<div class="child" style="transform: translate(7.2em, 25px) rotateZ(0deg) rotateY(0deg);"></div>
</div>
</div>
I want to put the Parent (red square) Centered Horizontally, no matter whats inside because childs count may vary
I have finally found the solution without removing the absolute positioning from my child elements !
Used overflow to then be able to get the total width of the children with scrollWidth
var A = document.getElementById('parent').scrollWidth
And knowing the true width of the parent's div I can then center it properly without further problems
$('#parent').width(A); or document.getElementById('parent').style.width = A + "px";
Workin' Snippet
var parent = document.getElementById('parent');
parent.style.width = parent.scrollWidth + "px";
var parent2 = document.getElementById('parent2');
parent2.style.width = parent2.scrollWidth + "px";
.body { height: 500px;}
.grandparent{ position: absolute; width: 100%; height: 200px; top: 0; border: solid; }
.parent { position: absolute; height: 100%; overflow: visible; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }
.child { position: absolute; width: 100px; height: 150px; border: blue solid; }
.grandparent2{ position: absolute; width: 100%; height: 200px; top: 200px; border: solid; }
.parent2 { position: absolute; height: 200px; overflow: visible; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }
.h41, .h42 { position: absolute; left:20px; }
.h41 { top: 20px; }
.h42 { top: 220px;}
<h4 class="h41">Centered with 5 Childs</h4>
<div class="grandparent">
<div id="parent" class="parent">
<div class="child" style="transform: translate(0em, 16px) rotateZ(-20deg) rotateY(0deg);"></div>
<div class="child" style="transform: translate(3.6em, 21px) rotateZ(-10deg) rotateY(0deg);"></div>
<div class="child" style="transform: translate(7.2em, 25px) rotateZ(0deg) rotateY(0deg);"></div>
<div class="child" style="transform: translate(11em, 21px) rotateZ(10deg) rotateY(0deg);"></div>
<div class="child" style="transform: translate(15.2em, 25px) rotateZ(20deg) rotateY(0deg);"></div>
</div>
</div>
<h4 class="h42">Centered with 2 Childs</h4>
<div class="grandparent2">
<div id="parent2" class="parent2">
<div class="child" style="transform: translate(0em, 16px) rotateZ(-10deg) rotateY(0deg);"></div>
<div class="child" style="transform: translate(5em, 21px) rotateZ(10deg) rotateY(0deg);"></div>
</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 resize an image and keep it in the middle of the page.
I have tried <center> and align="middle" and many other things I've found on here that didn't help.
Here is an example of the page (How I want it to be but without the text, background etc):
https://gyazo.com/5943303da90127d4e5bf24989812888e
And here is how it is currently:
Small Image: http://i.inf.vg/qkYCd
Medium Image: http://i.inf.vg/3AtgG
Large Image: http://i.inf.vg/E6b0r
img {
left: 50%;
top: 50%;
max-height: 100%;
max-width: 100%;
position: absolute;
transform: translate(-50%, -50%);
}
<img src="//i.imgur.com/7xYQq8P.jpg" />
.container {
width: 100%;
height: 100%;
display: table;
}
.container .inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="container">
<div class="inner">
<img src="http://i.inf.vg/images/png/3AtgG.png">
</div>
</div>
You could use media queries to change the image on different sized devices.
codepen: http://codepen.io/pen/
I have a grid of images with same width but with diferent height.
On hover the image i want to display two differnt links to get info of the image and the author.
The problem is i can't vertical aling the links over the image :/
HTML:
<div class="item">
<div class="img-work">
<img src="img/grid1.jpg" alt="" class="img-grid">
<a href="#" class="zoom"">
<img src="img/hover-item.png" alt="">
</a>
<a href="#" class="info">
<img src="img/hover-info.png" alt="">
</a>
</div>
</div>
CSS:
div.img-work a.zoom {
left: 31%;
position: absolute;
top: 27%;
visibility: hidden;
width: 38px;
}
div.img-work a.info {
left: 50%;
position: absolute;
top: 27%;
visibility: hidden;
width: 39px;
}
jQuery:
$('div.img-work').hover(function() {
$(this).children('a').css('visibility', 'visible');
$(this).children('img').css('opacity', '0.5');
}, function() {
$(this).children('a').css('visibility', 'hidden');
$(this).children('img').css('opacity', '1');
});
As you can't see i don't how to align those link vertically . Any hints would be appreciate. Thank you in advance
Here's a CSS solution: http://jsfiddle.net/08vorn1s/.
The images are vertically and horizontally centered within their container. You can easily adjust the code if the images need to be bottom-aligned.
HTML:
<div class = "grid">
<div class = "row">
<div class = "cell">
<img src = "http://placehold.it/150x150 " />
<div class = "links">
Info
Author
</div>
</div>
<div class = "cell">
<img src = "http://placehold.it/150x170 " />
<div class = "links">
Info
Author
</div>
</div>
<div class = "cell">
<img src = "http://placehold.it/150x200 " />
<div class = "links">
Info
Author
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.grid {
display: table;
width: 100%;
}
.grid .row {
display: table-row;
}
.grid .row .cell {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell > .links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: none;
}
.cell:hover > img {
opacity: 0.5;
}
.cell:hover > .links {
display: block;
}
Have you tried setting your property like so position: relative? You might also want to adjust your left and top CSS properties based on image size.
Your .item element needs to have a position: relative; and your overlay element (.info) needs to have:
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
display: block;
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/