I have a DIV that change his color when mouse over
I want to change the image inside the div when mouse over the div, not over the necessarily on the image
In the HTML
<div class="about">
<img class="about-project1">
CSS
.about-project1 {
width: 121px;
height: 42px;
background: url("img/coching.png") no-repeat;
border: 0px;
}
.about:hover h3 {
color: #fff;
}
.about a about-project1:hover {
background: url("img/coching_white.png") no-repeat;
}
Another thing is that the image appears with border although i tell border:0
why ?
10x very much
Udi
The following code will do what you want:
HTML
<div class="about">
<div class="about-project1"/>
</div>
CSS
.about-project1 {
width: 121px;
height: 42px;
background: url("https://www.gstatic.com/webp/gallery3/1.sm.png") no-repeat;
}
.about:hover h3 {
color: #fff;
}
.about:hover .about-project1 {
background: url("https://www.gstatic.com/webp/gallery/4.sm.jpg") no-repeat;
}
Finally, your image had a border because it was an img element with no src attribute, I changed the original code to use a div instead.
Fiddle is here
Related
I have an outer div, that has two divs.
One div works as a background and has a background image, and other one works as the content and has a background color of #fff, the one that works as a content has a title and an input.
I was trying make a border for my input , that shows what is behind the content div.
Because the proportions of the the background div changes on hover(on pupose), changing the way the border of the input should look.
So i decided to have a div as the border of the input.
But i have been stuck on trying to make the border to show what is behind the content div.
Here is the code:
#chat_bi{
position: absolute;
left: 0;
top:0;
background-repeat: no-repeat;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
background-size: cover;
z-index: -1;
filter: brightness(60%);
height: 100%;
width: 100%;
transition: 0.5s;
}
#outer_div_chat{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: calc(100% - 400px);
padding: 50px;
}
.chat{
padding: 15px;
z-index: 2;
box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
background-color: #fff;
}
#outer_div_chat:hover #chat_bi{
width: 105% !important;
height: 105% !important;
filter: brightness(95%);
}
#start_up_chat_div{
display: flex;
flex-direction: column;
}
/*text-input*/
.text_input_div{
padding:5px;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
}
.text_input{
outline:none;
padding:2px 4px;
border:none;
width: 100%;
box-sizing: border-box;
}
<div style="height:625px; overflow:hidden;">
<div id="outer_div_chat">
<div id="chat_bi"></div>
<div class="chat">
<div id="start_up_chat_div" >
<span style="padding-bottom: 10px;">Random text</span>
<div class="text_input_div">
<input type="text" class="text_input">
</div>
</div>
</div>
</div>
</div>
I kind of guess that one solution is applying, the same background to the border of the input div, in the same position, and size, but i was wondering if there is another way around, a more proper way around.
You can try something like this:
CSS
.bigcrazydivwithbackground {
background: url('https://images.pexels.com/photos/28477/pexels-photo-28477.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');
}
.crazytitle {
background: white;
padding: 10px;
}
.crazyinner {
border: 20px solid white;
}
.crazyinputwrapper {
margin: 20px;
}
input {
display: block;
width: 100%;
background: white;
line-height: 20px;
border: none;
}
HTML
<div class="bigcrazydivwithbackground">
<div class="crazybox">
<div class="crazytitle">
Title
</div>
<div class="crazyinner">
<div class="crazyinputwrapper">
<input type="text" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/hLphc3nu/
Maybe instead of position: absolute and position: relative, make them both position:absolute so the z-index's will work. Sometimes using a negative z-index might also be the problem.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
Hey guys I'm really new to css so I'll try to explain this the best I could.
I'm trying to create an image hyperlink .link so that whenever I hover my mouse pointer over it, .link and .picture "changes" their image. But I still want the hyperlink to be clickable.
.picture {
background-image: url('imageB1.jpg');
width: 100px;
height: 100px;
}
.link {
background-image: url('imageA1.jpg');
width: 100px;
height: 100px;
}
.link:hover {
background-image: url('imageA2.jpg');
}
.link:hover+.picture {
background-image: url('imageB2.jpg');
}
<a href="destination.html">
<div class="link"></div>
</a>
<div class="picture"></div>
The problem with my code is that while .link may be clickable, picture doesn't change its background-image when I hover on .link. I hope someone can help me. Thanks in advance!
Try this one
<a href="destination.html" >
<div class="link">
</div>
</a>
<div class="picture"></div>
.picture {
background-image: url('imageB1.jpg');
width: 100px;
height: 100px;
display:none;
}
.link {
background-image: url('imageA1.jpg');
width: 100px;
height: 100px;
display:block;
}
.link:hover {
content: url('imageA2.jpg');
}
.link:hover+.picture {
background-image: url('imageB2.jpg');
}
I am not sure whether general sibling combinaton can be select from one sibling but you can do it using different way.
As wrapping both element(a and div) to another div element then you can select Selects all .pictures classes where the parent is a .container class like the below.
.picture {
background-image: url('DSC_0268.jpg');
width: 100px;
height: 100px;
}
.link {
background-image: url('DSC_0268.jpg');
width: 100px;
height: 100px;
}
.link:hover {
background-image: url('db 2 assignment schedule.png');
}
.container:hover > .picture {
background-image: url('db 2 assignment schedule.png');
}
</style>
<div class="container">
<a href="destination.html">
<div class="link"></div>
</a>
<div class="picture"></div>
</div>
look for selectors that you can use in css. css selectors
I think this will met what you want to do!.
There is a border around the container which is white in color. I tried the border: 0; rule but it doesn't remove it at all.
EDIT: http://mpkosis28.com
CSS:
#content {
height: 350px;
width: 700px;
margin-left: auto;
margin-right: auto;
border: 0;
text-align: center;
}
#content img {
top: 30%;
left: 50%;
width: 50%;
background: url(../images/awd/boxas.png) no-repeat center;
background-size: cover;
height: 300px;
}
#content a img {
border: 0;
}
<div id="content" align="center">
<h1 class="centeredImage"><img></h1>
</div>
This must work:
#content a img {
border: none;
}
First Set image tag attribute border = 0 in your html file
and in css file change like this.
#content a{
border:none;
outline:none;
}
#content a img{
border:none;
outline:none;
}
If you set the image source in the regular fashion like <img src="..." /> instead of as a background css property it will not show the border. Is there a reason why you need to set it as a background property?
It is just the browser implementation of showing that the src attribute <img> doesn't have valid image link.
Solution for your code:
copy the background url from the css to src attribute of the <img>.
change the <img> to <div>, and adjust it according to your requirements.
I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.
<head>
<style>
img{
border : none;
text-decoration: none;
}
#forum
{
background:url(forum_button.png) 0px 0px no-repeat;
width: 300px;
height: 81px;
}
#forum:hover
{
background:url(forum_button.png) -300px 0px no-repeat;
width: 300px;
height: 81px;
}
#facebook
{
background:url(social_buttons.png) 0px 0px no-repeat;
width: 29px;
height: 29px;
}
#facebook:hover
{
background:url(social_buttons.png) 0px -33px no-repeat;
width: 29px;
height: 29px;
}
#twitter
{
background:url(social_buttons.png) -31px 0px no-repeat;
width: 29px;
height: 29px;
}
#twitter:hover
{
background:url(social_buttons.png) -31px -33px no-repeat;
width: 29px;
height: 29px;
}
</style>
</head>
<body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
<img id="forum" />
<div id="social">
<img id="facebook">
<img id="twitter">
</div>
It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it
="#"><img id="facebook"></
It's not a border, what you see is the broken image border.
If you want to keep your code, change the img tag to a div..
Change
border: none;
to
border: none !important;
This way it will override all the parent's declarations and thus has to work.
That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.
Insert Image by using img src with proper height and width.
Use Paint or other tools to edit image.
example.
make sure that your original image dont have any border, if it have simply select and crop the image.
maybe the border is not html given but its in your img ?
So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.
You are trying to set an icon image on a link using a background image that can be repositioned on a hover event.
The simplest way of doing this is as follows.
The HTML can be as simple as:
<a class="test" id="test" href="#"></a>
and apply the following CSS:
.test {
background: beige url(http://placekitten.com/50/50) center center no-repeat;
display: inline-block;
width: 50px;
height: 50px;
border: none;
}
Apply the background image on the link (a tag) instead of an img tag, which is not needed.
See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/
I would like to blend an image with a solid colour using CSS. How can this be done?
This is what I've got so far:
header {
width: 900px;
height: 60px;
background-image: url(../images/banner.jpg);
background-color: rgba(51,102,153,0.5);
}
It's not working though!
I just can't get my head around this.
Thanks for any help!
The currently accepted answer and it's alternative indeed work. But both use background-image's for actual content. This method uses an img tag.
HTML
<div class="blend">
<img src="http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg" alt=" " />
</div>
CSS
.blend {
background: red;
display: inline-block;
}
.blend img {
opacity: 0.5;
}
See this fiddle.
Use two divs, see this fiddle:
HTML:
<div id="wrapper">
<div id="content"></div>
</div>
CSS:
#wrapper
{
background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
}
#content
{
background-color: yellow;
opacity: 0.5;
width: 477px;
height: 318px;
}
The currently accepted answer works, but it's semantically incorrect and would benefit from some optimisations.
You can use the pseudo after element for this, so you don't need to introduce additional markup for this. So the markup remains this:
<div id="content"></div>
The CSS is verbose, but more expressive. I don't like that the "wrapper" contains the actual content (image), while the "content" is just a simple color. Also there is no need to fade the whole div, but you can use the alpha channel for the color.
#content {
position: relative;
background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
width: 477px;
height: 318px;
}
#content:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,0,0,0.5);
pointer-events: none;
}
jsfiddle