Change Image src with fade effect on list menu hover - javascript

I'm trying to create an effect where you hover over a link and the image in the backgound changes depending on which link was hovered.
function changeImage(artistCover){
document.getElementById('slider').src = artistCover;
}
a {
color:#ffffff;
}
a:hover {
color: orange;
}
.imgArea {
height:100vh; display:flex; justify-content:center; align-items:center;
}
.imgArea img {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.imgArea:before {
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index:0;
}
ul li {
list-style-type: none; font-size: 24px;line-height: 2em;
font-variant: small-caps;font-weight: bold; text-align:center;
}
<div class="imgArea">
<img src="destinyschild.jpeg" id="slider">
<div style="position:absolute;">
<ul>
<li>
Destiny’s Child
</li>
<li>
Little Mix
</li>
<li>
Pele
</li>
<li>
Chris Brown
</li>
</ul>
</div>
</div>
The above code works and replaces the image without a fade effect. What do I need to add/modify to get the crosfade effect to work?
Here's a JSFiddle example of my script as well. Many thanks in advance!

Related

How to put <ul> around image in css

So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
Here is how it looks at the moment:
As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.
Here is the html file:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
And the css file:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
I'll provide more information if needed. Thank you in advance for your time.
Here is one way of doing it.
You have the right idea by using absolute positioning to place the logo over the link panel.
I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.
To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.
You can adjust margins on various elements to control the spacing between and above the li elements.
Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>
Add image after one and two. And .list-menu li float:left; display:block;

Add color overlay to image on hover [duplicate]

I'm having a hard time getting a color overlay (and image) to appear when hovering over an image.
Essentially, the user should see this overlay (which is separated in 2 below):
I have the following HTML snippet:
<ul id="Grid">
<li class="mix category_1 mix_all" style="display: inline-block; opacity: 1;">
<img src="http://i.imgur.com/J4PaouI.jpg" alt="#">
</li>
</ul>
Here is the particular CSS (and a z-index just to be sure):
.mix_all:hover {
background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
background-color: #de6573 !important;
z-index: 99999999;
}
#Grid .mix {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.mix.mix_all img {
max-height: 200px;
max-width: 200px;
}
Here is a link to the fiddle:
http://jsfiddle.net/t2ea9/
Here is a correct version: http://jsfiddle.net/maximgladkov/b2twr/1/
You should add an additional element with position: absolute and show it.
HTML
<ul id="Grid">
<li class="mix category_1 mix_all">
<img src="http://i.imgur.com/J4PaouI.jpg" alt="#" />
<div class="overlay"></div>
</li>
</ul>
CSS
.mix_all {
position: relative;
}
.mix_all .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mix_all:hover .overlay {
background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
background-color: #de6573 !important;
z-index: 99999999;
}

Image stretches screen instead of fitting within div

I'm trying to make a page that fits on a single screen without any scrolling, but the CSS that defines its format that I've got isn't working.
The problem can be seen in the JSFiddle
The footer is fixed at the bottom of the screen (as it should be), but the background image (within content) extends from below the header to below the footer.
There also seems to be a problem with the background image when resizing the browser, but I'm sure that will be fixed when solving this problem.
I have the following code:
HTML: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hide_these[hidden]).style.display='none';
$(".sidebar").slideToggle(600);
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Home
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
About
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Projects
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Contact
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<script>
$(function() {
$('body').addClass('loaded');
});
$(".menu-btn").on("click", function(){
$(".sidebar").slideToggle(600);
});
$(".header h1").delay(500).animate({"opacity": "1"}, 700);
</script>
</body>
</html>
CSS: main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:absolute;
}
#about, #projects, #contact{
width: 100%;
height:100%;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
color: white;
display:flex;
align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
}
.content p {
padding-top: -10px;
text-align: center;
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: absolute;
}
.footer a img {
position: relative;
top: -5px;
}
My attempt to fix was setting the .content area from height = [30px, -80px] (i.e., from the top of the footer to the bottom of the header).
I'm brand new to CSS, so I'm sure this is very poorly formatted, so sorry in advance.
Thanks everyone,
erip
If you want to show everything on a single page without any scrolling then Give position:fixed to body. You can see the result here http://jsfiddle.net/mcnn1d81/1/ .
So if I understand you properly, you want the footer to line the bottom of your content while making sure to fill the browser, no matter the size. This looks like a job for "relative" positioning! Currently your footer is set to "absolute", which is why it overlaps your background.
here's an updated fiddle with RELATIVE changes: https://jsfiddle.net/mcnn1d81/13/
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: RELATIVE;
}
.content {
top: 0px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
position:RELATIVE;
}
I hope that helps!
EDIT: Added code to keep the content in the screen. https://jsfiddle.net/mcnn1d81/20/
This a quick, rough edit, and realize that what's written will only adhere to the content you put in it. As soon as you tell the content how big it needs to be you'll cause some wonky things to happen.
If you want dynamic content (that stretches and fits the screen) you'll have to add some code to the resize function to make sure everything stays the same in the CSS. I'd add more, but I've got other things I need to get to. I hope this pushes you in the right direction!
just update your css with this.
html,body {
padding: 0;
margin: 0;
font-family: arial;
height:100%;
width:100%;
overflow:hidden;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: 100%;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
overflow:hidden;
}
that will fix your issue
you can keep background-size : cover; for .content class. it will best option to set your background image.
Try this :
body
{
margin:0%;
overflow:hidden;
}

How to show text in image hover

I have a few tumbnails that I want to show some text on them in hover. I could make them dark in hover but do not know how to add text.
example: http://www.lenzflare.com/video-production-portfolio/
Here is what I have done:
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -110px;
margin-top: -150px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>
Demo: http://jsfiddle.net/jmXdh/79/
Well I'm going to assume you want this in a list:
There are a few main concepts here: Relative positioning and how it works with absolute positioning, Source order, and your centering technique.
When giving position:relative; to the box, you are saying "I am the boundary now - for any absolutely positioned things within me" (unless they are relative, and then like that on down the line) - So, the absolutely positioned cover thing you want to fade in - is absolutely positioned to one or more edges of the relative box. (most people use top: 0; left: 0;) --- so the absolute box is no longer in the "flow" and lives in it's own magic world determined by the relative parent.
Source order: your html will appear bottom up when stacking. so your cover thing should be below the image (in the html order) - you could use z-index - but there is no need to do that.
The negative margins are not really awesome and unneeded here. You can just text align center them. I would do some tests and put borders around stuff so you can see what it actually happening. ALSO - I encourage you to use box-sizing: border-box; on everything...
Read about: Border box
HTML
<ul class="thumbnail-list">
<li>
<a href="#" class="image-w">
<img alt="thumbnail"
src="http://placekitten.com/600/300" />
<div class="cover">
<h3>Title</h3>
<p>A little bit more about the thing</p>
</div>
</a>
</li>
</ul> <!-- .thumbnail-list -->
CSS
.thumbnail-list {
list-style: none;
margin: 0; paddingn: 0;
}
.thumbnail-list li {
float: left;
}
a {
text-decoration: none;
color: inherit;
}
.thumbnail-list .image-w {
display: block;
position: relative;
width: 16em;
}
.image-w img {
display: block;
width: 100%;
height: auto;
}
.cover {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
color: rgba(255,255,255,0);
text-align: center;
transition: all 1s linear;
}
.cover:hover {
background-color: rgba(0,0,0,.8);
color: rgba(255,255,255,1);
transition: all .2s linear;
}
.thumbnail-list h3 {
font-size: 1.2em;
}
.thumbnail-list p {
font-size: .9em;
}
Here is the code in action on jsfiddle
you could consider something like this fiddle.
I copy my code here:
=================
HTML
<a href="/" class="img"
style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');"
onmouseover="this.firstElementChild.style.display='block'" >
<span class='play' onmouseout="this.style.display = 'none'";>
my lovely text here
<span>
</a>
=================
CSS
a {
min-height:104px;
min-width:184px;
display: inline-block;
overflow: hidden;
position: relative;
}
.play{
display:none;
color:#fff;
height:104px;
width:184px;
background-color:rgba(0,0,0,0.5);
position: absolute;
}
It sounds like you want to have a tooltip, if so then add a title to the a href:
<a href="/" title="This is my text" >
You could also use the tooltip in jQuery UI.
Otherwise, you could use the javascript onmouseover or the jQuery hover / mouseenter events to show the text in the play div. You may need to make sure that the z-index of the play div is higher than the img.
This works:
.pic{
background: url(http://i42.tinypic.com/2v9zuc1.jpg);
width: 200px;
height: 100px;
}
.text{
background: black;
text-align: center;
color: white;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.text:hover{
opacity: 0.8;
}
<div class="pic">
<div class="text">My Text</div>
</div>
DEMO
Add some text content to the play element.
<div class="play">Some text</div>
With added css for .play:
color:#fff;
font-size:16px;
Try this: http://jsfiddle.net/JU7zm/
<a href="/">
<div class="play">text</div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
</a>
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a .play {
display: none;
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 184px;
height: 104px;
color: #fff;
}
a:hover .play { display: block; }
Here's a simple JS solution you can insert into your HTML:
<script type="text/javascript">
document.getElementById("your_image_id").title = 'your hover text';
</script>

CSS Hover to change other elements

I have this navigation bar which I have done in CSS, I would like it so when I hover over one of the 3 navigation icons it will change the main image background position.
I've tried a few ways but not managed to get them to work properly.
CSS
/* Nav Button 1 */
.nav1 {
float:left;
padding-top:20px;
border:none;
outline:none;
}
#nav1
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav1:hover
{
background-position: 0 -107px;
}
/* Nav Button 2 */
.nav2 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav2
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav2:hover
{
background-position: 0 -107px;
}
/* Nav Button 3 */
.nav3 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav3
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav3:hover
{
background-position: 0 -107px;
}
/* Nav Name */
.navname {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#navname
{
display: block;
width: 228px;
height: 81px;
background: url("images/blank.png") no-repeat 0 0;
}
HTML
<div id="navigation">
<div class="nav1">
<a id="nav1" href="#"></a>
</div>
<div class="nav2">
<a id="nav2" href="#"></a>
</div>
<div class="nav3">
<a id="nav3" href="#"></a>
</div>
<div class="navname"><a id="navname" href="#"></a>
</div>
</div>
Any ideas how this can be done? The 'navname' element is background position I want to change when hovering over either nav1, nav2, nav3.
Thanks :D
This is quite simple using jQuery:
$('element-to-initiate-change').hover(function(){
//this will happen when your mouse moves over the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
},function(){
//this is what will happen when you take your mouse off the object
$('element-to-change').css({
"property":"value",
"property":"value",
});
});
Here is an example: http://jsfiddle.net/dLbDF/258/
If you made a jsfiddle using your code, I would've done this to your code so you could see clearer. Always use jsfiddle or some other kind of example when asking a question.
Old question but here's a possible CSS-only solution for others who come across it.
https://jsfiddle.net/Hastig/ancwqda3/
html
<div id="navigation">
<a class="nav n1" href="#"></a>
<a class="nav n2" href="#"></a>
<a class="nav n3" href="#"></a>
<a class="title t0" href="#"></a>
<a class="title t1" href="#">one</a>
<a class="title t2" href="#">two</a>
<a class="title t3" href="#">three</a>
</div>
css
.nav {
display: inline-block;
float: left;
padding-top: 0px;
width: 92px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/triangle.png") no-repeat 0 0;
}
.nav:hover {
background-position: 0 -107px;
}
.title {
width: 228px;
height: 107px;
background: url("http://dl.dropbox.com/u/693779/blank.png") no-repeat 0 0;
color: red; font-weight: bold;
text-decoration: none;
font-size: 40px; line-height: 107px;
text-align: center;
}
.t0 {
display: inline-block;
}
.t1, .t2, .t3 {
display: none;
}
.nav:hover ~ .t0 {
display: none;
}
.n1:hover ~ .t1, .n2:hover ~ .t2, .n3:hover ~ .t3 {
display: inline-block;
}

Categories