I'm trying to get a transparent png frame image to hover over an img tag to create the look of a frame over it. I've tried multiple different approaches and none seem to work.
The latest method I used was http://www.cssbakery.com/2009/06/background-image.html this doesn't seem to work either.
HTML
<div class="filler">
<div class="filler-picture">
<img src="../../media/img/test.jpg" alt="test" />
<div class="filler-mask"> </div>
</div>
</div>
CSS
.filler {
padding-left:20px;
height:361px;
width:559px;
float:left;
}
.filler-mask {
background: url('..img/filler.png') no-repeat;
position: absolute;
left:0; top:0;
height:361px;
width:559px;
}
.filler-picture {
z-index: 0;
background: url('..img/test.jpg') no-repeat;
position: relative;
height: 361px;
width: 559px;
display: block;
}
Does anyone have any idea why this isn't working.
you could put 2 absolute divs under filler-picture with different z-index
<div class="filler">
<div class="filler-picture">
<div class="filler-img">
<img src="../../media/img/test.jpg" alt="test" />
</div>
<div class="filler-mask">
<img src="../../media/img/filler.png" alt="filler" />
</div>
</div>
</div>
CSS
.filler-mask {
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 900;
}
.filler-img{
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 50;
}
instead of using the image as a background you could put the image directly but images don't follow z-index so you have to wrap the images in divs.
Since the original question referenced a post on my blog, I decided to write an update to my Cookie Cutter Method using Neil's markup as an example.
Related
The problem I have here is because we use a theme (wordpress) for our clients that makes it easy for them to change an image and this is a simple version of the code it produces:
<div class="row">
<div class="column">
<img class="image" src="image user can change">
</div>
</div>
What I need to try and achieve is a layer over the top of the image to put a logo on the image without changing the core HTML that the theme produces and only using CSS.
My thought was adding a background image to the class column and somehow bringing it in front. I tried z-index on the column with no luck. Any ideas?
You can use pseudo-elements to achieve what you are after. Try using something like the following code:
.column {
position:relative;
}
.column:after {
content:"";
position:absolute;
z-index:2;
background:url(your-image.jpg);
}
.column img {
position:relative;
z-index:1;
}
Here is an example fiddle:
https://jsfiddle.net/scooterlord/cqhf2gw4/
I think you could take advantage of the :after selector in your column class. Something like this:
.column {
position: relative;
}
.column:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
bottom: 10px;
right: 10px;
background-image: url('path/to/logo.png');
}
That would position a small logo in the bottom right.
Add new class .overlay add the img logo path, give the parent position:absolute;
.image {
height: 200px;
max-width: 100%;
}
.overlay{
position:absolute;
/*positioning here*/
}
.overlay img{
height: 30px;
}
<div class="row">
<div class="column">
<div class="overlay"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></div>
<img class="image" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline">
</div>
</div>
I tried to position my logo and headerpic on top of each other like this:
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
But my logo is still at the top end of my header pic.
My css code looks like this:
.header img.headerpic {
max-width:100%;
float:left;
position:relative;
background:transparent url(../images/header.jpg)
}
.header img.logo {
position: relative;
float:left;
max-width:100%;
background:transparent url(../images/logo.png )
}
and i added this in my index.php:
<body id="home">
<!-- header area -->
<div class="header">
<id="logo">
<img src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" alt="logo"/>
<img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
<div class="infobox"><div class="inner">
</div>
</body>
What do i need to change that my Header-Picture is the background and my logo is on the left in the center of the Picture?
My actual view
position:absolute is relative to the nearest positioned parent, or the entire page. Therefore, here you are setting the images to be at the exact same location.
What you need is for .imgB1 to set position: relative and then move it to place with the top and others. E.g something like so:
#logo img {
position:absolute;
}
.header img.headerpic {
max-width:100%;
top: 10px;
left: 10px;
position: relative !important;
}
<div class="header" id="logo">
<img src="https://placehold.it/200/333333" alt="logo"/>
<img class="headerpic" src="https://placehold.it/100" alt="" />
<div class="infobox"><div class="inner">
</div>
I'm not actually tested this but, if it works thumbs up. I forget to complete my css classes and goes to php and not I have full knowledge of php
margin-left: 25%;
margin-top:25%;
Increase the z-index, case may be that your logo has more z index than img divs
If you want both images to stack on top of each other, what you need to do is to set header as relative and img to absolute like so:
.header{
position: relative;
}
.header img{
position: absolute;
}
<div class="header">
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
</div>
By setting both img.headerpic and img.logo to position:relative, both will occupy their own space and thus won't stack on top of each other.
By defining the parent's position as relative, in this case .header, anything inside .header with an img tag that's positioned absolute will occupy the same space, relative to the parent.
I have several fluid images that I want to float and stack up next to each other. For example I have the img-div width set to 50% which stacks two images in each row. The images also increase in size depending on browser size. At the same time I want to be able to put a text over the middle of each image that floats around and stays in the center of the images. My problem is the text not centering. When I set img as absolute it centers but the stacking gets messed up.
Any idea how I can do this via CSS only?
Here's my HTML code:
<div id="container">
<!-- image1 -->
<div class="img-div">
<a href="#">
<img src="images/image1.jpg" />
<div class="txt-div">
<p>Some text goes here!</p>
</div>
</a>
</div>
<!-- image2 -->
<div class="img-div">
<a href="#">
<img src="images/image2.jpg" />
<div class="txt-div">
<p>Another text.</p>
</div>
</a>
</div>
<!-- image3 -->
<div class="img-div">
<a href="#">
<img src="images/image3.jpg" />
<div class="txt-div">
<p>Some more text.</p>
</div>
</a>
</div>
<!-- image4 -->
<div class="img-div">
<a href="#">
<img src="images/image4.jpg" />
<div class="txt-div">
<p>Last text.</p>
</div>
</a>
</div>
</div>
Here's my CSS:
.img-div {
width: 50%;
float:left;
a {
position: relative;
display: block;
height: 100%;
font-size: 0;
text-align: center;
}
a:before {
vertical-align: middle;
content: '';
display: inline-block;
height: 100%;
width: 0;
}
.txt-div {
vertical-align: middle;
position: relative;
z-index: 10;
display: inline-block;
font-size: medium;
p {
padding: 0;
margin:0;
}
}
img {
position: absolute;
width: 100%;
z-index: 9;
top: 0;
left: 0;
}
}
You almost had it :)
use position:relative/ absolute to draw your text-container over the image, and within use the pseudo :before and vertical-align technique to center your <p>.
.img-div {
width: 50%;
display:inline-block;
position: relative;
}
.img-div img {
width:100%;
}
a {
text-align: center;
}
.txt-div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.txt-div:before {
content:'';
padding-top:100%;
vertical-align:middle;
display:inline-block;
}
.txt-div p {
max-width:95%;
display:inline-block;
vertical-align:middle;
}
DEMO: http://codepen.io/gc-nomade/full/Cxkqf
remove the div around the p and set position:absolute; to the p set the img to position:relative; the p will now go over the img, if I'm correct. set text-align:center; to p to get it centered. (sometimes it might be good to width:100%; the p too)
You could use CSS background images to place each image in a dynamically sized div, then simply float the divs and they will fill in whatever space without altering position of the block level elements. In this case each div would get a unique id according to the image it would contain and the urls for your images would be a background image for the div. The only drawback to this that I can see is that if images were disabled you would not get alt text, but your divs would remain the specified size. and in their correct position.
I want to put one Image over other Image.
Following is my code :
<div style="position: relative; left: 0; top: 0;">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
css :
#image1
{
top: 0; left: 0;
position:relative;
z-index:2;
}
#image2
{
position:relative; left:-70;
z-index:1;
}
fiddle for that
I want that when I make width or height increase of second image it also increase of first automatically. I want to put image 2 over image 1.
Any Guidance Please.
You may use margin-left in #image2
#image1 {
top: 0; left: 0;
position:relative;
z-index:2; }
#image2 {
position:relative; left:-70px;
z-index:1;
margin-left: 25px;
}
Check the fiddle: http://jsfiddle.net/r5JMM/5/ for your answer
#image1{position:absolute;}
#image2{position:absolute;resize:both;}
.container{position:relative;}
<div class="container">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
You can use jquery resize for doing resize operations on images
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, like stuck to the top of it.
I tried different things as including the image in another div or defining its class like:
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
Any idea?
You can just do it like this:
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>
Position the div relatively, and position the ribbon absolutely inside it. Something like:
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
While looking at the same problem, I found an example
<style type="text/css">
#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;
}
</style>
<a id="topright" href="#" title="TopRight">Top Right Link Text</a>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
Try using float: right; and a new div for the top so that the image will stay on top.
Example below:
#left{
float: left;
}
#right{
float: right;
}
<div>
<button type="button" id="left" onclick="alert('left button')">Left</button>
<img src="images/ribbon.png" class="ribbon" id="right">
</img>
</div>
<p>some text...
the image is on the top right corner</p>
<p>some more text...</p>