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
Related
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>
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/
I am trying to create a grid style portfolio page in which the title highlights when hovered over. I would like also a background color to show over the image as well. I have created both of these but can't figure out how to have them happen at the same time. Below is the HTML and CSS as well as the link to see what I mean in action.
.home_blog_box { position: relative; float: left; width: 287px; padding: 0 12px 12px 0; }
.home_blog_box img { width: 287px; height: 201px; }
.home_blog_box h3 { position:absolute; width: 287px; height: 201px; bottom:3px; left:0px;}
.home_blog_box h3:hover {background-color: #777777; opacity:.85;}
.home_blog_box h3 a {opacity:0; color:#ffffff; text-decoration: none; font-size:30px;}
.home_blog_box h3 a:hover {opacity:1}
<div class="home_blog_box">
<?php } ?>
<?php the_post_thumbnail('featured-blog'); ?>
<h3><?php the_title(); ?></h3>
</div><!--//home_blog_box-->
Thanks!
You can do this nicely with the :after or :before pseudo elements: http://jsfiddle.net/TpfA8/
example:
<div class="image-box">
<img src="http://placehold.it/200x150" />
<p>title</p>
</div>
and relevant css:
.image-box {
position: relative;
overflow: hidden;
width: 200px;
}
.image-box:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(200,100,100, 0.5);
}
.image-box p {
display: none;
}
.image-box:hover p {
display: block;
position: absolute;
top: 10px;
left; 10px;
}
Using CSS-generated content, you're creating a box around around the content of '' (nothing) but this element still adheres to the box model (sort of) so it can get things like height, width, position, etc.
Make sure to specify width for your image container so you can use the overflow: hidden; property.
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);
}