I want to set the background image so that it appears in front of foreground image.
I tried the following code but it is not working as I expected:
.background-image
{
border :0px;
background-image: url(/images/icon.png);
z-index:1000;
}
.foreground-image
{
width:200px;
height:113px;
border :0px;
z-index:1;
}
<div>
<a href="#" class="background-image">
<img class="foreground-image" src="./images/pic1.jpg" />
</a>
</div>
I am using CSS2.
Here is one way to do it.
If this is your HTML:
<div>
<a href="#" class="background-image">
<img class="foreground-image" src="http://placekitten.com/200/100"/>
</a>
</div>
apply the following CSS rules:
div {
border: 1px dotted blue;
}
.background-image {
border: 1px dotted red;
background-image: url(http://placekitten.com/200/50);
background-position: center left;
background-repeat: repeat-x;
display: block;
width: 500px;
}
.foreground-image {
vertical-align: top;
width: 200px;
border: 0px;
position: relative;
z-index: -1;
}
Set position: relative on the image and throw the image deeper into the stacking order by using z-index: -1.
See demo at: http://jsfiddle.net/audetwebdesign/HUK28/
by removing the foreground-image.
.background-image {
border :0;
background-image: url(/images/icon.png);
width:200px;
height:113px;
display: block;
}
.foreground-image {/**/}
<div>
</div>
Related
I have an ion slide box and it displays images. I want to add a button, ion-plus-round, to the bottom right side of the image. I don't want to add it to the bottom right of the slider, but rather to the bottom right side of the img only.
<ion-slide-box class="item-slide-box">
<ion-slide ng-repeat="image in vm.item.images" ng-cloak >
<img ng-src="{{image}}">
</ion-slide>
</ion-slide-box>
<a class="button icon ion-plus-round myButton"></a>
I have done the following but I am wondering how I can get the button to be float: right inside of the img:
.slider {
height: 60vh;
background-color: #76838f;
position: relative;
}
.slider-slide {
color: #000;
background-color: #76838f;
height: 100%;
}
.slider .slider-slide .img-ng {
display: block;
margin-left: auto;
margin-right: auto;
height: 100%;
max-width: 100%;
position: relative;
}
.slider .slider-pager {
bottom: 45px;
}
.myButton {
position: absolute;
bottom: 0px;
right: 0px;
}
codepan: http://codepen.io/anon/pen/gPYBpR
I have just edited you code, you can try this in code pane and check whether it is fulling your requirements.
Html code:
<ion-slide-box class="item-slide-box">
<ion-slide ng-cloak class="content">
<img class="img-ng" ng-src="http://geomorph.sourceforge.net/fourier/Bouboule256.jpg">
<a class="button icon ion-plus-round myButton"></a>
</ion-slide>
</ion-slide-box>
add some css line like:
.content{
position:relative;
}
.content a{
position:absolute;
bottom:5px;
right:5px;
}
Note:remove ".myButton" css from css and place button after the image source as shown in code,Hope this would exactly what you want.
For example if you really want the button exactly on the image just follow the example code and you can implement this code in your code.
HTML:
<div class="main">
<img src="http://placehold.it/182x121"/>
Can be BUTTON/LINK
</div>
CSS:
.main{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
.content a {
position:absolute;
bottom:5px;
right:5px;
background:blue;
color:#FFF;
}
above code will can help you give button on the image.
how can I create menu like on the picture?
Requirements:
Built using Bootstrap columns, must be responsive
In normal state, only Option and icon (green square) can be seen
OnHover: The Suboption (in blue rectangle) expands pushing Option up and also Caption in red rectangle appears, also pushing the whole Option up.
When one Menu item is hovered, all the others must stay down, not moving
Expanding with animation
Here's my fiddle attempt: http://jsfiddle.net/52VtD/7878/
HTML of one item (all are wrapped in a row):
<div class="col-xs-12 col-sm-3 nopadding item">
<div class="mask">
<div class="inner-wrapper">
<p>Option A</p>
<div class="hidding-guy">
<p>Hello</p>
Suboption
Suboption
Suboption
</div>
<i class="origami o-01"></i>
</div>
<div class="btn-red ">CAPTION</div>
</div>
</div>
CSS:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.footer-menu-wrapper {
background: #ddd;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
}
.footer-menu-wrapper .item {
position: relative;
}
.footer-menu-wrapper .item:hover .hidding-guy, .footer-menu-wrapper .item:hover .hidding-guy > * {
height: auto;
}
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
}
.footer-menu-wrapper .mask .hidding-guy {
height: 0px;
}
.footer-menu-wrapper .mask .hidding-guy > * {
display: block;
height: 0px;
}
.btn-red {
background: #e91333;
color: #fff;
width: 100%;
min-height: 66px;
border: 0px transparent;
text-align: center;
}
Alter your css to:
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
position: absolute;
background-color: #ddd;
bottom: 0;
}
now it behave like a dropup menu. Keep in mind that you must reset the positioning for the responsive layout like:
#media (max-width: 768px){
.footer-menu-wrapper .mask{
position: relative;
}
}
DEMO
UPDATE DEMO with media query
UPDATE:
Hide the CAPTION - opacity: 0 and show it on hover.
Second hide the options - visibilety: hidden and also show it on hover.
This ist a quick solution! The rest should be simple css styling
DEMO
I'm wondering if it would be possible to create a CSS style that can enable a small red dot to show up overlaying an image to indicate that it was sold?
Can you overlay a transparent image on another image using CSS?
This code generates a red dot over the container div:
#cont {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
#cont:before {
position: absolute;
content: '';
background-color:#FF0000;
border-radius:50%;
opacity:0.5;
width: 200px;
height: 200px;
pointer-events: none;
}
<div id="cont">
<img src="" alt="image here" width="200" height="200">
</div>
Your best bet is to create another element (div) for the status of the item. If the item is sold set a class on the item to sold. Then use border-radius on the status div in CSS to create the red dot.
Example:
.sold .status{
border-radius: 5px;
background: #f00;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
right: 5px;
}
Basically,
HTML
<ul>
<li></li>
</ul>
CSS
ul::marker
{
list-style-type: circle;
position:absolute;
}
li{
color: red;
}
Yes, just put them one after the other and do something like style="margin-top:-100px" on the second one to move it on top of the previous one.
What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?
#one
{
position: fixed;
left:225px;
top:702px;
}
.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}
.button:hover
{
background-position: 0 0;
background-color: transparent;
border-style: none;
}
_
<body>
<div id="map">
<img src="images/map.png"/>
</div>
<div id="one">
<a class="button" href="images/one.jpg"/>
<img src="images/button.png"/>
</a>
</div>
</body>
Your title is not really much related to your question .. so I'll just try to answer the question.
The image is not showing, because by default img is an inline element and you've set text-indent to -99999px.
You can either remove that text-indent or set the display of img to block:
.button img { display: block; }
I have an image inside a span tag, the span has a set width and height, and is set to overflow hidden. so it only reveals a small portion of the image. This works but the small portion of the image that is visible is the top left corner. I would like it to be the center of the image that is visible. I think I need to absolutely position the image, but the size of the image can vary though. Does anyone know how to do what I am trying to do?
Thanks!
Here is the HTML:
<div class="lightbox_images">
<h6>Alternate Views</h6>
<span>
<a href="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 1">
<img src="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" />
</a>
</span>
<span>
<a href="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 2">
<img src="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/simong/sim_banner_01.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 3">
<img src="http://www.kranichs.com/images/simong/sim_banner_01.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/psu/psu_banner.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 4">
<img src="http://www.kranichs.com/images/psu/psu_banner.jpg" />
</a>
</span>
</div>
Here is the CSS:
.lightbox_images{
background-color:#F9F9F9;
border:1px solid #F0F0F0;
}
.lightbox_images h6{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size:14px;
font-weight:bold;
font-style:italic;
text-decoration:none;
margin:0px;
}
.lightbox_images span{
padding:5px;
padding-bottom:15px;
background-color:#DFDFDF;
margin:5px;
display:inline-block;
border:1px solid #CCC;
}
.lightbox_images a{
display:inline-block;
width:60px;
height:60px;
overflow:hidden;
position:relative;
}
.lightbox_images a img{
position:absolute;
left:-50%;
top:-50%;
}
.lightbox_images span:hover{
border:1px solid #BBB;
background-color:#CFCFCF;
}
As proposed in https://stackoverflow.com/a/14837947/2227298 by Billy Moat, there is a solution without knowing the image height and width.
Try it here: http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Given this sort of HTML:
<span><img src="..." width="..." height="..." alt="..." /></span>
You could use CSS like this:
span {
position: relative;
display: block;
width: 50px; /* Change this */
height: 50px; /* Change this */
overflow: hidden;
border: 1px solid #000;
}
span img {
position: absolute;
left: -10px; /* Change this */
top: -10px; /* Change this */
}
You can then center the image based on its exact dimensions.
Alternatively, if you're able to modify the HTML, you could instead use something like this:
<div>
[name of picture]
</div>
Then, match it with this CSS:
div {
width: 50px;
height: 50px;
background: transparent url(...) center center no-repeat;
border: 1px solid #000;
}
div a {
display: block;
height: 100%;
text-indent: -9999em; /* Hides the link text */
}
In this case, the background will be automatically centered regardless of its dimensions, and it'll still be clickable.
This example, the images are at the center of the element, regardless of its size
HTML:
<div class="box">
<img src="example.jpg">
</div>
CSS:
div.box{
width: 100px;
height: 100px
overflow: hidden;
text-align: center;
}
div.box > img{
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 100px !important;
}
If the width and height of the image varies, I think the only way to do this is with javascript.
Style the image to left:50%; top:50%; and then, use javascript (image onload event maybe) to add margin-left:-imageWidth/2 px; margin-top:-imageHeight/2 px;
So basically you have
span img {
position: absolute;
left: 50%;
top: 50%;
}
and the following js
window.onload = function() {
var images = document.getElementsByTagName('img');
for(i=0; i<images.length; i++)
images[i].onload = centerImage(images[i]);
function centerImage(img) {
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
}
PS. If you're using a javascript framework/library the code could simplify a bit, but I didn't make that assumption.
You can set the image as the background of the element and set x,y axis as in the following example:
#mySpan {
background-image: url(myimage.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: -10 -10
}