I have the following CSS rules applied to a DIV:
.icon {
position:relative;
display: inline-block;
width: 90px;
height: 94px;
background: url("test-icon-sprite.png") no-repeat scroll transparent;
background-position: 0 0;
overflow: hidden;
z-index: 1000;
}
.icon.plaque:after {
content: url("test-icon-plaque.png");
position:absolute;
width: 90px;
height: 94px;
z-index: 1
}
...
<div class="icon plaque"></div>
What happens is that the image in the pseudo element is positioned on top of the image in the other element. That's not what I want! Is there any way to fix this?
My goal is to create an icon with an optional backplate (plaque) using only one html element, is it doable?
Use multiple backgrounds.
.icon {
background-image: url(test-icon-sprite.png);
}
.icon.plaque {
background-image: url(test-icon-sprite.png), url(test-icon-plaque.png);
}
Related
I'm going to set background image and background color both this is working fine but the problem is that when I write some text on a div the background automatically apply on the text here is my code please review it.
#canvas-preview {
width: 200px;
border: 1px solid #000;
box-sizing: border-box;
position: relative;
background-image: url('path/to/image.png');
}
#canvas-preview::before {
background-color: green;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
#custom-canvas {
margin: 10px;
color: #fff;
}
<div id="canvas-preview">
<div id="custom-canvas">There is some text</div>
</div>
I want to set text color white. What's the problem with this code.
UPDATE
I need both background-image and background-color.
For example green color over the image with opacity: 0.37
Sorry, I forgot the placing opacity property in css
#canvas-preview::before {
background-color: green;
opacity: 0.37; /* editing in code */
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
I need both things not one.
Add z-index:-1; to your pseudo element #canvas-preview::before to make visible the Text
As it comes over the #canvas-preview as a layer and works as fallback in case your bg-image won't load.
So to make visible the text-layer over that you need to lower the z-index of your pseudo element.
Updated Code Snippet
#canvas-preview {
width: 200px;
border: 1px solid #000000;
box-sizing: border-box;
position: relative;
background-image: url(https://hd.unsplash.com/photo-1463950922781-0e6d07cbd146);
}
#canvas-preview::before {
background-color: rgba(0, 128, 0, 0.5);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
#custom-canvas {
margin: 10px;
color: #ffffff;
z-index: 2;
position: relative;
}
<div id="canvas-preview">
<div id="custom-canvas">There is some text</div>
</div>
Instead of adding opacity I would suggest to use alpha value of the bg-color(rgba) in your pseudo element which will be a better solution.
I checked your code and text is white. It is just hidden behind this green container because of this:
#canvas-preview::before
If you remove before thing(just for test purposes) you will see that text is white. So You need a different approach. Code is fine.
#canvas-preview{
width:200px;
border:1px solid #000;
box-sizing: border-box;
position: relative;
background-image: url('http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e');
}
#canvas-preview::before{
background-color:green;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index:-99999; // add z-index in this css code.
}
#custom-canvas{
margin:10px;
color:#fff;
}
<div id="canvas-preview">
<div id="custom-canvas">There is some text</div>
</div>
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).
Reference :
Your code should change like this:
#canvas-preview::before{
background-color:green;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index:-1;
}
#custom-canvas{
margin:10px;
color:#fff;
}
This may be helpful.
I'm trying to make my footer img change to a different img on hover, I've accomplished this by creating each img as a div, however, I'm trying to avoid this, is there any other possible way to do this?
Current CSS:
.footerLeft {
float:left;
width: 50%;
height: 100px;
color: #fff;
background-color: #33383b;
}
.footerLeft p {
margin-left: 25px;
}
.footerLeft img {
width: 175px;
height: 50px;
padding-left: 25px;
margin-top: 10px;
}
.footerRight {
float:right;
width: 50%;
height: 100px;
color: #fff;
background-color: #33383b;
}
.footerRight img {
width: 35px;
height: 35px;
}
.footerRight p {
text-align: right;
position:relative;
margin-top: -20px;
margin-right: 20px;
}
Current HTML:
<div class="footerLeft">
<img src="img/logo.png">
<p>Sharpturn Network© 2016</p>
</div>
<div class="footerRight">
<ul id="menu">
<li><img src="img/footer/facebook.png"></li>
<li><img src="img/footer/twitter.png"></li>
<li><img src="img/footer/youtube.png"></li>
</ul>
<p>Designed by Ryan Williams</p>
</div>
Set one img as the background img, and the other as the background img on hover.
footer {
background-image: url(...);
}
footer:hover {
background-image: url(...);
}
The only alternative I can think of to using a div (or some other element with background image) is to use JavaScript. This will allow you to change the 'src' of the image on hover.
element.setAttribute('src', 'http://www.example.com/image.jpg');
As #partians said, just added "background-size" as cover, I assumed that you need that.
footer {
width: 900px;
height: 600px;
background-image: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
background-size: cover
}
footer:hover {
background-image: url("http://image2.redbull.com/rbcom/010/2013-07-25/1331603705670_2/0010/1/900/600/2/red-bull-illume.jpg");
}
<footer> </footer>
try this.just copy and pastea and try it.only have to replace your two images.
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding:0;
}
.imageOne{
width: 500px;
height: 500px;
box-shadow: 1px 2px 1px black;
background-image: url(http://www.ron-gatepain.com/images/Golden_Gate_Bridge.JPG?306);
background-repeat: no-repeat;
}
.imageTwo{
width: 500px;
height: 500px;
box-shadow: 1px 2px 1px black;
background-image: url(http://gym1526-english.narod.ru/images/Statue.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="myimage" class="imageOne">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#myimage").mouseenter(function(){
$(this).addClass("imageTwo").removeClass("imageOne");
});
$("#myimage").mouseleave(function(){
$(this).addClass("imageOne").removeClass("imageTwo");
});
});
</script>
</body>
</html>
EDIT: Note that some of the other answers will change the image when hovering any part of the whole footer container. This method changes the image only when hovering the image's region.
You could declare a pseudo-element on the footer container in the same position as the image to replace it on hover. Basically, using a combination of opacity and z-index you can hide the original image and show the pseudo element in the same place.
Here is an example of how to accomplish that:
.footerLeft:before {
/* this creates the pseudo-element */
width: 175px; /* Same as img */
height: 50px; /* Same as img */
margin-left: 25px; /* Same as img */
margin-top: 10px; /* Same as img */
background: url(http://lorempixel.com/175/50/cats); /* your replacement img */
position: absolute;
z-index: 0;
content: '';
}
.footerLeft img {
width: 175px;
height: 50px;
margin-left: 25px; /* I used margin-left instead of padding-left */
margin-top: 10px;
position: relative; /* necessary for the z-index to work */
z-index: 1; /* puts the img above the pseudo-element by default */
}
.footerLeft img:hover {
opacity: 0; /* hides the original image on hover */
}
EDIT 2: If you want the social media icons to change images on hover, the process is similar. Create pseudo elements on each a tag with CSS, with the same dimensions as the original img. Configure a different replacement image for each icon:
.footerRight img {
width: 35px;
height: 35px;
position: relative; /* enables the use of z-index */
z-index: 1; /* puts the image on top by default */
transition: opacity .2s; /* remove this for no smooth transtion */
}
.footerRight a:before {
width: 35px; /* same a img */
height: 35px; /* same a img */
z-index: 0;
content: '';
position: absolute;
}
.footerRight li:nth-child(1) a:before {
/* facebook icon */
background: url(http://lorempixel.com/35/35/cats);
}
.footerRight li:nth-child(2) a:before {
/* twitter icon */
background: url(http://lorempixel.com/35/36/cats);
}
.footerRight li:nth-child(3) a:before {
/* youtube icon */
background: url(http://lorempixel.com/36/35/cats);
}
.footerRight img:hover {
opacity: 0; /* hides the original image */
}
Note: This method has the advantage of loading the replacement images immediately. The same might not be true for other methods.
You can see the working example here: http://codepen.io/wilman/pen/mVZVzg
I'm trying to use 'bakground-position' in the background of my div, but not working.
When background an image, the 'background-position' works, but with 'background-color' is not working.
What can I do?
This is my CSS:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-color: #000000;
background-position: right 50px;
}
You can provide an background-image as a solid color, creating a monochrome gradient:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-image: linear-gradient(#000, #000);
background-position: right 50px;
background-repeat: no-repeat;
}
The gradient is fully compatible with an image, and if you set both colors to the same, it is fully equivalent to a solid color
demo
You can workaround with a div only for background, simulating it by mixing position: absolute offsets and negative z-index.. (Though I've tested only in chrome)
See fiddle
HTML
<div id="defaultContentParent">
<div id="defaultContent"></div>
<div id="defaultContentContent"><div>
</div>
CSS
#defaultContentParent {
border: 1px solid #00f;
background-color: #aaa;
color: #fff;
position: relative;
width: 200px;
min-height: 140px;
margin: 0 auto;
z-index: 0;
}
#defaultContent {
background-color: #000000;
height: 50px;
position: absolute;
top: 50px;
right: 0;
width: 80px;
z-index: -1;
}
#defaultContentContent {
z-index: 9999;
}
You can't position a background-color property, since that property fills the entire space. Likewise, you can't use background-color with a background image, because that would, basically, replace your background image with the filled background-color, at which point there is no reason to use a background image at all!
Are you perhaps thinking of using a gradient, or giving a background image a filter of a certain filter? That would be a different question.
This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.
Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.
You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.
Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/