Everything should be explained in this jsfiddle.
Im so sorry, but I can't get the link to show. Its in the comments!
I can't get it to give me a red gradient over the image..
You'll need a wrapper around the image, but here is an example of how to set that up:
.imgWrap {position:relative; display:inline-block;}
.imgWrap img {display:block;}
.imgWrap:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background:linear-gradient(transparent, red);}
.imgWrap:hover:after {display:none;}
<div class="imgWrap">
<img src="https://rocket-league.com//content/media/items/avatar/220px/75e8bb7e5d1473412157.png" />
</div>
Related
So I was just testing phone functionality for my site. It operates as expected (ie the logo is at the top), but when clicked through as a link from instagram it displays as below. Is it something to do with the bar that is displayed in the link from instagram?
Jsfiddle
html
<div class="Rad_title_container">
<div class="Rad_title">
<svg>
</svg>
</div>
</div>
css
.Rad_title_container{
width:100%;
}
.Rad_title {
padding-top:2%;
padding-left:17.5%;
z-index:3;
position:fixed;
width:65%;
pointer-events:none;
}
It seems it didn't like position:fixed. I had to add a max height as well because it was doing something funky like expanding the height to 200%. No idea what was going on.
.Rad_title_container{
position:absolute;
width:100%;
z-index:3;
}
.Rad_title {
padding-top:2%;
position:relative;
width:65%;
pointer-events:none;
text-align:center;
margin:auto;
max-height:10vh;
overflow-y:none;
}
Here is part of the code I am working on and I want it to add a background around the whole image when I hover over it but when I set the width and height of the div it won't work and only the bottom part is changed as shown in the snippet.
I would like some help on how to solve this problem.
#select-background{
display:inline;
}
#select-background:hover{
display:inline;
background-color:#c1c1c1;
height:95px;
width:95px;
border-radius:10px;
}
<div id="select-background"><img height="75" width="75" src="https://arteminc.github.io/stackoverflow-assets/hotmail.png"/></div>
Try changing the display to block or inline-block. That seems to get your current code to highlight the entire image.
#select-background{
display:inline-block;
}
#select-background:hover{
display:inline-block;
background-color:#c1c1c1;
height:95px;
width:95px;
border-radius:10px;
}
<div id="select-background"><img height="75" width="75" src="https://arteminc.github.io/stackoverflow-assets/hotmail.png"/></div>
I was asked to code an unusual shape background color on some centered text.
The text should be centered and it's background color should continue all the way right of the parent element.
Here is the desired output :
I have never seen anything like this so I don't even know where to start. Thank you for your help!
You can use a pseudo element to make the black background continue on the right :
DEMO
HTML :
<div>
<span>Some text with</span><br/>
<span>unusual background</span><br/>
<span>color</span>
</div>
CSS :
div{
float:right;
padding-right:150px;
text-align:center;
position:relative;
}
span{
display:inline-block;
background:#000;
color:#fff;
line-height:1.4em;
margin:0;
}
span:after{
content:'';
position:absolute;
width:200px;
height:1.4em;
right:0;
background:inherit;
z-index:-1;
}
I don't understand well your problem, but try to mix these concepts:
HTML:
<div id="parent">
<p id="son">Some text with unusual background color</p>
</div>
JS:
<script type="text/javascript">
document.getElementsById("parent").style.background="red";
document.getElementsById("son").style.background="blue";
</script>
try to change the son and the parent colors.
I want to keep a div on another div, which is linked to any site.
here is my css
.link_div a {
float:left;
width:80px;
height:20px;
background:yellow;
}
.over {
position:absolute;
left:0;
top:0;
background:red;
width:80px;
height:20px;
}
here is html
<div class="link_div"> HELLO </div>
<div class="over"></div>
Is this possible to keep "Over" div on top and link should be on ?
This is an awesome post:
Click through a DIV to underlying elements
Adding this css to your .over should do it:
pointer-events:none;
plus for IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;
You could get something like this then:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
All credits go to this guy's post of course.
I want one image above the other. How can I do it?
http://twitpic.com/2cnpku
from the code you posted, it appears you are passing an img element into another src attribute of another img element. Is there a reason you are doing this?
<style type="text/css">
.imgA1 {
position:absolute;
top:0px;
left:0px;
z-index:2;
width:1300px;
height:283px;
}
.imgB1 {
position:absolute;
top:0px;
left:0px;
z-index:1;
width:1300px;
height:1000px;
}
</style>
<img class="imgA1" src="images/home_nav.png" alt="home_nav" />
<img class="imgB1" src="images/paperbackground.png" alt="Background" />
A similar code mockup can be seen at http://jsfiddle.net/gBPBd/3/ with my images to prove the concept and it is funcitoning in chrome, ie8.
Set the image you want on top to have a higher z-index. Right now, it has a lower z-index.