edit:
http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead
How can I vertically centered an image, based on the container height.
Given the container height is fixed, and the image size is dynamic.
Currently only top part of the image is shown as we use overflow: hide;.
Thanks
You can set the image CSS to height: 100%.
Please provide some codes, so that we can help you further with your problem.
Photoshop
The easiest solution is obviously photoshop here; you can just resize the images.
CSS
You can use the CSS property background-image for this. The img tag is not made to hide parts of the image, only to resize.
To do this, you can use the following example:
background-position: 0px -60px;
That property is the key to create a background image that fits in your slideshow. However; you will need to manually change that for all images.
Example for you to use background-position:
.slider-nav-crop4 {
/*this is your image with ~60px white space above */
background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -60px;
}
<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;">
</div>
Positioning the image
This is actually a hack that can be set per image, but it could be a little tricky.
You can position the images absolute, give them a negative top setting and make the images larger then the container, setting overflow:hidden.
example
.item .crop-image {
height:200px;
position:relative;
overflow:hidden;
}
.crop-image img {
position:absolute;
top:-40px;
height:300px;
}
<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;">
<div class="item item1" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 active left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 next left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide">
</div>
</div>
</div>
Lets say your code is,
<div class="image">
<img scr="Image_path" alt="" />
</div>
CSS
.image{
position: relative;
}
.image img{
margin: auto; //horizontally align center
position: absolute; //vertically align center
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Hope this will work.
Method 1:
container {
display: table;
vertical align: middle;
}
img {
display: table-cell;
vertical align: middle;
}
Method 2:
container {
position: relative;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Method 3:
container {
height: 300px;
line-height: 300px;
}
In css vertical alignment is a very discussed topic, this is 3 of many examples. Use the best for you.
Related
Basically, I have a page that should load 3 pngs when you press the button. The problem I'm having is that I have one image #heart that I want to overlay onto a #background. I've tried different permutations of positioning but it (the #heart image) won't move at all, even with a high z-index over the lower layer. It won't even move to the right with left: x px
Sorry. I'm still pretty new. I'm completely stuck as to how to proceed. Developer tools just tell me that it's sitting in an image div above where I want it to be... Here's the code:
#heart {
z-index: 99999;
left: 200px;
top: 100px;
height: 100px;
width: 100px;
position: relative;
}
#background {
width: 800px;
margin: 0 auto;
display: none;
z-index: -10;
position: relative;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
To make this you will have to use some others css properties like flex and background-image and update you HTML DOM just like this:
#heart {
height: 100px;
width: 100px;
}
#background {
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 500px;
background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png");
background-size: cover;
background-position: center;
position: relative;
}
<div class="action">
<div id="background">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
</div>
</div>
When you give an element "position: relative", it keeps it's place in the document flow, so when you change it's position on the page with top: 100px or whatever, it moves but the space it vacates is not removed from the document. Therefore, nothing moves in to take it's place and z-index does nothing.
Try this:
<div class="action">
// Switch the two images in the document flow to make this easier, although you can ignore that if you want.
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<div id="bennyNormal"></div>
</div>
So now, #heart is no longer "below" the #background image in the document flow. bennyNormal div is still "above" everything inside the #action div but because the #background image comes first (with a relative position (or even if it had no position) #background will keep the div below it on the page in the doc flow. If you also give #background display: block it will stop the div from moving up, if that ever becomes an issue.
Then:
#heart {
z-index: 99999; <== this is irrelevant now. get rid of it.
left: 200px; <== change these to position over #background as you wish
top: 100px;
height: 100px;
width: 100px;
position: absolute; <== important bit.
}
#background {
width: 800px;
margin: 0 auto;
display: none; <== You want it invisible? Should be block.
z-index: -10; <= Same with this. Don't screw around with z-index if you can avoid it.
position: relative; <== This no longer matters, but you can still include it
}
As nitin9nair comment, setting #heart { position: absolute; } seems to be enough
#heart {
position: absolute;
top:200px;
left:320px;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
Basically I have a fixed size div that contains an <img> tag. I cannot change the structure.
Often these images are much larger than the container due to keeping them 100% width and filling the box. Most times this results in too much of the image shown at top and not cropped to the center of the image.
So using jQuery (or pure CSS if possible) I want to adjust the position of the image to move it up so the top is cropped off instead of the bottom.
Also, this should remain responsive as the viewport changes width.
Here is a fiddle
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
It's doable with known height container, like your demo. We can set the container to position:relative, and set the image to position:absolute, plus some extra set ups as follows.
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
position: relative;
}
.container img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
height: auto;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
jsfiddle
If you are OK with using the images as the div background, you can do the following:
Option1:
HTML:
<div class="container" id="first"></div>
<div class="container" id="second"></div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
background-position: center center;
background-repeat: no-repeat;
}
#first {
background-image: url('http://placekitten.com/901/500/');
}
#second {
background-image: url('http://placekitten.com/900/500/');
}
Update- Option2:
without using the image as background.
HTML:
<div class="container">
<img class="centered" src="http://placekitten.com/900/500/" />
</div>
<div class="container">
<img class="centered" src="http://placekitten.com/901/500/" />
</div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
}
.centered {
object-fit: none;
object-position: center;
width: 100%;
height: inherit;
}
Please check this option1, option2
For now I'm going to use:
$("img").each(function(){
var hHeight = $(this).height()/2;
$(this).css("top", - hHeight);
});
I would love to see other solutions, especially if they are better.
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle
So i am trying to make it so when i hover over an image it makes everything else darker around it. I have tried using css but doesn't work.
Here is the my code: jsfiddle.net/vkq09wga/5/
you can do this with CSS only by adding an overlay set to position: fixed and display:none. Set your img to position: relative (so you can apply order) and set a higher z-index than your overlay. As long as the overlay is a sibling or descendant of your img you can show it on :hover:
CSS
.overlay{
display:none;
background: rgba(0,0,0,.7); //opaque background
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
img{
position: relative;
z-index: 2;
}
img:hover ~ .overlay{
display:block;
}
HTML
<p>Lorem Ipsum...</p>
<img src="http://www.placecage.com/200/200"/>
<p>Lorem Ipsum...</p>
<div class="overlay"></div>
FIDDLE
UPDATE
Here is a demonstartion of my code with your fiddle:
CSS
.overlay{
display:none;
background: rgba(0,0,0,.7);
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.image img{
position: relative;
z-index: 2;
}
.image img:hover + .overlay{
display:block;
}
HTML
<h1>Title</h1>
<div class="image">
<h3><center>TITLE OF IMAGE</center></h3>
<img src="..." alt="Image" height="315px" width="100%"/>
<div class="overlay"></div>
</div>
<div class="image">
<h3><center>TITLE</center></h3>
<img src="..." alt="Image" height="315px" width="100%"/>
<div class="overlay"></div>
</div>
NEW FIDDLE
Jquery Hover Documentation
Jquery Animation Documentation
Jquery Css Documentation
Using this you could animate the darkening of the element by using jquery css to change the opacity and background color of the element on hover.
This fiddle seems to be exactly what you are looking for:
http://jsfiddle.net/49Qvm/28/
$('ul').hover(function(){
$('#darkness').fadeTo(200, 1);
}, function(){
$('#darkness').fadeTo(200, 0, function(){
$(this).hide();
});
});
I'm using bootstrap's carousel ( http://twitter.github.com/bootstrap/javascript.html#carousel ) to show a user submited gallery. Because it's user submited, it doesnt look very good with the rest of my website design thats why i want to add a layer mask on top off everything
Here is the mask : http://img52.imageshack.us/img52/2659/degrade.png
Unfortunatly, I'm unable to show that particular div...
It has to be non clickable because when a user click on a picture of the carousel, it opens modal popup with the full sized picture.
My css (its using less but you get the idea):
.carousel {
width: 292px;
height: 163px;
.carousel-inner {
width: 292px;
height: 163px;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-control {
margin-top: 0;
top: 0;
right: 0;
background: none;
border: 0;
width: 60px;
height: 163px;
opacity: 0.65;
background-repeat: no-repeat;
&:hover.right {
background-image: url('/assets/index/r_arrow.png');
}
&:hover.left {
background-image: url('/assets/index/l_arrow.png');
}
}
heres is my html:
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="thumbnail1.jpg" />
</div>
<div class="item">
<img src="thumbnail2.jpg" />
</div>
<div class="item">
<img src="thumbnail3.jpg" />
</div>
</div>
<a class="carousel-control left" href=".carousel" data-slide="prev"> </a>
<a class="carousel-control right" href=".carousel" data-slide="next"> </a>
</div>
Depending on your cross-browser support needs, you could try giving the overlay pointer-events: none. Here's an example of that.
If you insert <div class="overlay"></div> into .carousel-inner, give .carousel-inner {position: relative;} and
.overlay {
background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
There's an answer here that gives information and links to solutions using javascript. Unfortunately, the resources for the accepted answer to the linked question have gone offline, but there is a fairly simple demonstration here: http://jsbin.com/uhuto