I need to align the play button image in the center of another image.
The example that I have is breaking when titles are long.
How can we align blue color image exactly over the large image
Fiddle
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
</div>
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
Just put your play-item-wrapper inside the container video-image-wrapper and add a relative positioning on it.
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
</div>
<div class="video-details-wrapper">
<span>this is video short video title</span>
</div>
</div>
And in CSS
.video-image-wrapper { position: relative; }
JSFiddle: https://jsfiddle.net/L51bd8vr/
Related
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
So I have the above image with a text next to it. The thing is that I want the text next to it to appear not on the bottom right but at the middle right/ top right of the image with some space between the image and text. How can I achieve it?
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' style='vertical-align:middle' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
Solved it by adding vertial-align:middle !
You can use position absolute on the text and then align the text anywhere you want using the top property.
Example:
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="display:inline; position:absolute;">
Twin Peaks
</div>
</div>
You can achieve it by using flex in the parent. Just set align-items: center
<div style="display: flex; align-items: center;">
<div>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="margin-left: 10px;">
Twin Peaks
</div>
</div>
<div>
<div style="float: left;">
<img src="https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg" height="300px" />
</div>
<div style="float: left; margin-left: 10px;">
Twin Peaks
</div>
</div>
It'll set your Text top right side of your image.
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I have a three column layout and one of them is like -
<div class="column one-second product_image_wrapper">
<div class="images">
<div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
<div class="image_wrapper">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy" data-rel="prettyPhoto">
<div class="mask">
</div>
<img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="Sumanji Kamphy" title="Sumanji Kamphy">
</a>
<div class="image_links">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy">
<i class="icon-search">
</i>
</a>
</div>
</div>
</div>
</div>
</div>
I want to center this image both vertically and horizontally currently it looks something like this -
Can someone tell how to do this ?
Assuming that you want to put it in center with relative to the div with class image_frame , the following code will work.
.image_frame{
position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}
.image_frame img{
position:absolute;
top:50%;
left:50%;//brings the edge of image to exact center both horizontally and vertically
margin-top:-125px;
margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}
I have three images inside a div that scale according to window size. The div has a width of 60% and is floated left
<div id="display">
<img src="assets/images/angle1.jpg" style="width:35%;height:35%;" />
<img src="assets/images/angle2.jpg" style="width:35%;height:35;" />
<img src="assets/images/angle3.jpg" style="width:60%;height:100%;" />
</div>
Basically I want to maintain this scalability with the images arranged like this:
IMG SETUP http://brycekirk.ca/assets/images/setup.gif
Use nested DIVs to keep the right-side images together:
<div id="display">
<div id="column1" style="width:35%; float:left">
<img src="assets/images/angle1.jpg" /><br/><img src="assets/images/angle2.jpg" />
</div>
<div id="column2" style="width:60%; float:left">
<img src="assets/images/angle3.jpg" />
</div>
</div>
I want to display several images next to each other and each image has a date below it. The date is wider than the image and I would like to center the image on top of the date. Here's a code snippet
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/17/11 03:29pm)
</div>
</div>
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/22/11 02:16pm)
</div>
</div>
If I'm understanding you right, you should just be able to use text-align: center:
http://jsfiddle.net/rahjU/
To shift your image Before other content (visually)
.img {
order: -1;
}
W3