So basically, I want it so when you hover over the image it changes to another picture.
This is my code.
#arsenal{
background-image: url(bilder/ArsenalU.jpg);
width:210px;
height:210px;
}
#arsenal:hover {
background-image: url(bilder/Arsenal.jpg);
}
<div id="arsenal"> </div>
Hover image may have different size so you have to set the image's height and width.
#arsenal{
background-image: url(bilder/ArsenalU.jpg);
width:210px;
height:210px;
}
#arsenal:hover {
background-image: url(bilder/Arsenal.jpg);
height:210px;
width:210px;
}
<div id="arsenal"> </div>
Or you can use inline Javascript
<img src='ArsenalU.jpg' onmouseover="this.src='Arsenal.png';"
onmouseout="this.src='ArsenalU.png';" />
The code is correct. However, the file path of the picture extensions is incorrect. I recommend you to work in 2 separate files, css and html. The code you wrote is working.
Related
This is the style for the image :
.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-image:url("gaming.jpg");
height:100%;
border:#00AEF2 3px;
}
and this one for the element I intend to do a hover effect which changes the background-image in .gaming:
<section class="New-era-1 list_text" >Artificial Intelligence</section>
What I tried
.New-era-1:hover .gaming{
background-image:url("just-for-fun.jpg")
}
But no luck. How do we go about this problem?
The way you're targeting your .gaming class means the HTML element associated with it needs to be inside the .new-era-1 <section> element. It should work after that. See below:
CSS
.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-image:url("http://www.alien-covenant.com/app/xalien-covenant-fill.jpg.pagespeed.ic.rPyCbS72Kx.jpg");
height:500px;
width: 400px;
border:#00AEF2 3px;
}
.New-era-1:hover .gaming{
background-image:url("https://i1.fdbimg.pl/fvpxi5v1_o6b4xt.jpg")
}
HTML
<section class="New-era-1 list_text" >Artificial Intelligence
<div class="gaming"></div>
</section>
See my JSFiddle: https://jsfiddle.net/0esrq2by/
Another approach is to use jquery, to change hover effect, like this:
$('.new-era-1').hover(){
$('.gaming').css('background-image', 'url(to-your-image.jpg)');
}
This has probably been asked before, but is it possible to set the background image with css based on the data attribute?
I have this:
<div class="imageWrap" data-bigImage="someURl" data-smallImage="someUrl"></div>
and my CSS:
background-image: attr(data-bigImage url);
background-repeat: no-repeat;
background-size: cover;
I use these 2 sizes for an responsive solution, and the data attribute can be changed by an admin, so I cannot set a path to a specific file..
How can I solve this? Is there a non-javascript solution?
I don't think it can be done the way you want to.
What you could do is create two child div's, and toggle between them.
<div class="imageWrap">
<div class="bigImage" style="background-image:url('someUrl');"></div>
<div class="smallImage" style="background-image:url('someUrl');"></div>
</div>
The CSS would then look something like this:
.imageWrap .bigImage,
.imageWrap .smallImage{
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
display:block;
}
.imageWrap .smallImage{
display:none;
}
#media screen and (max-width:sizeInPx){
.imageWrap .smallImage{
display:block;
}
.imageWrap .largeImage{
display:none;
}
}
I would however prefer a javascript solution, since that wouldn't require me to preload / buffer two images.
i saw an effect in a website and i tried to write the code my self and i could.
you can see it in here:
click to see the effect
as you can see a black and white image becomes colorful but i only used a trick to do that.the code sets the black and white image's height to 0px while the colorful image is hidden behind it and so it is shown as we hover on the black and white image.
my question is that are there any simple ways to do the same thing?
or change it a little bit, for example can the color drop frop the top of image?
here's my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bgimg {
background-image: url("1.png");
background-repeat:no-repeat;
height:190px;
-webkit-transition:0.5s;
}
.main{
height:190px;
-webkit-transition:0.5s;
background-image: url("2.png");
background-repeat:no-repeat;
}
div:hover .bgimg{
height:0px;
}
</style>
</head>
<body>
<div class="main">
<div class="bgimg">
</div>
</div>
</body>
</html>
It looks pretty simple to me as you have it! If you want the colour to come from the top, just swap the image sources and the heights, so the colour image expands down instead of the b&w image shrinking up:
.main {
height:190px;
-webkit-transition:0.5s;
background-image: url("http://kh-salamat-sk.ir/sweep/1.png");
background-repeat:no-repeat;
}
.bgimg {
background-image: url("http://kh-salamat-sk.ir/sweep/2.png");
background-repeat:no-repeat;
height:0px;
-webkit-transition:0.5s;
}
.main:hover .bgimg {
height:190px;
}
<div class="main">
<div class="bgimg"></div>
</div>
Obviously you can use the same trick to do the same from left and right.
If you want to do more complicated transitions such as a checkerboard fade, then CSS alone probably isn't sufficient (although maybe you can do something with gradients) and you will need Javascript and probably canvas.
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.