So i am trying to make it so when i hover over an image it makes everything else darker around it. I have tried using css but doesn't work.
Here is the my code: jsfiddle.net/vkq09wga/5/
you can do this with CSS only by adding an overlay set to position: fixed and display:none. Set your img to position: relative (so you can apply order) and set a higher z-index than your overlay. As long as the overlay is a sibling or descendant of your img you can show it on :hover:
CSS
.overlay{
display:none;
background: rgba(0,0,0,.7); //opaque background
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
img{
position: relative;
z-index: 2;
}
img:hover ~ .overlay{
display:block;
}
HTML
<p>Lorem Ipsum...</p>
<img src="http://www.placecage.com/200/200"/>
<p>Lorem Ipsum...</p>
<div class="overlay"></div>
FIDDLE
UPDATE
Here is a demonstartion of my code with your fiddle:
CSS
.overlay{
display:none;
background: rgba(0,0,0,.7);
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.image img{
position: relative;
z-index: 2;
}
.image img:hover + .overlay{
display:block;
}
HTML
<h1>Title</h1>
<div class="image">
<h3><center>TITLE OF IMAGE</center></h3>
<img src="..." alt="Image" height="315px" width="100%"/>
<div class="overlay"></div>
</div>
<div class="image">
<h3><center>TITLE</center></h3>
<img src="..." alt="Image" height="315px" width="100%"/>
<div class="overlay"></div>
</div>
NEW FIDDLE
Jquery Hover Documentation
Jquery Animation Documentation
Jquery Css Documentation
Using this you could animate the darkening of the element by using jquery css to change the opacity and background color of the element on hover.
This fiddle seems to be exactly what you are looking for:
http://jsfiddle.net/49Qvm/28/
$('ul').hover(function(){
$('#darkness').fadeTo(200, 1);
}, function(){
$('#darkness').fadeTo(200, 0, function(){
$(this).hide();
});
});
Related
I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">
</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
</div>
</body>
</html>
Thanks in advance!
Just put the img as a background-image via css, then position the links on top of a container with that background-image:
.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}
.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}
.split-link-image a:first-child {
top: 0;
}
.split-link-image a:last-child {
bottom: 0;
}
<div class="split-link-image">
</div>
This is a simple sample:
<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>
My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.
I have created something that does what you are looking for. It has the following limitations:
You need to know the height of the image you are using in pixels and code the top half to be exactly half that many. When I use % instead, I wind up with the top link being bigger than the bottom. I didn't do much playing around to try and get around that.
The image actually is loaded twice, so if your images are very big, this may be a concern for you.
* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}
<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>
edit:
http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead
How can I vertically centered an image, based on the container height.
Given the container height is fixed, and the image size is dynamic.
Currently only top part of the image is shown as we use overflow: hide;.
Thanks
You can set the image CSS to height: 100%.
Please provide some codes, so that we can help you further with your problem.
Photoshop
The easiest solution is obviously photoshop here; you can just resize the images.
CSS
You can use the CSS property background-image for this. The img tag is not made to hide parts of the image, only to resize.
To do this, you can use the following example:
background-position: 0px -60px;
That property is the key to create a background image that fits in your slideshow. However; you will need to manually change that for all images.
Example for you to use background-position:
.slider-nav-crop4 {
/*this is your image with ~60px white space above */
background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -60px;
}
<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;">
</div>
Positioning the image
This is actually a hack that can be set per image, but it could be a little tricky.
You can position the images absolute, give them a negative top setting and make the images larger then the container, setting overflow:hidden.
example
.item .crop-image {
height:200px;
position:relative;
overflow:hidden;
}
.crop-image img {
position:absolute;
top:-40px;
height:300px;
}
<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;">
<div class="item item1" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 active left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 next left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide">
</div>
</div>
</div>
Lets say your code is,
<div class="image">
<img scr="Image_path" alt="" />
</div>
CSS
.image{
position: relative;
}
.image img{
margin: auto; //horizontally align center
position: absolute; //vertically align center
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Hope this will work.
Method 1:
container {
display: table;
vertical align: middle;
}
img {
display: table-cell;
vertical align: middle;
}
Method 2:
container {
position: relative;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Method 3:
container {
height: 300px;
line-height: 300px;
}
In css vertical alignment is a very discussed topic, this is 3 of many examples. Use the best for you.
so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>
I have some trouble with CSS.
I have code (example):
<div class="background" style="background: url(sample.jpg) no-repeat;">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
What I want to do is, that when hovering on this background image - it should get opacity to lets say 0.3, but how to make it, that inside items would stay the same opacity 1?
Here's the best trick in the book. https://jsfiddle.net/xbxvr8as/
If you have trouble with CSS then this might well bend your brain but the jsfiddle is as pared down as you can get it. Play with it by removing single styles to see what happens.
The crux is to relative:position your element. Then you can add a "pretend" extra div-like thing using the :after pseudo-element. You give this pseudo-element a bunch of properties - the most important probably being position:absolute which allows it to sit straight underneath the text.
HTML
<div id="a">
some stuff in here .....
</div>
CSS
#a{position:relative}
#a:after{
content:" ";
position:absolute;
display:block;
top:0;left:0;right:0;bottom:0;
background-color:#f00;
z-index:-1;
opacity:0.2;
}
You could use a pseudo element.
<div class="background">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
.background {
position: relative;
background-color: yellow; /* added for illustrative purposes */
min-height: 150px; /* added for illustrative purposes */
}
.background:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.3;
background-image: url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg');
background-repeat: no-repeat;
}
jsFiddle: http://jsfiddle.net/3kbf5p5x/
You could put the background on an absolutely-positioned element within the outer element, and then control its opacity independently:
<div style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(sample.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
Note that to do that, we have to make its container positioned via position: relative.
Live Example:
body, html {
height: 100%;
}
.outer {
width: 100%;
height: 100%;
}
.background {
opacity: 0.5;
}
<div class="outer" style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(http://onlyfreewallpaper.com/download/sea-coast-night-sky-stars-milky-way-1024x768.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
I want to do exactly the same as this page. http://www.googleventures.com/
It is like a parallax effect when you slide down the lower part of the page comes up. How can I do that with an image as a header? Pure jquery? Is there an onSlide function?
I did an alternate option. You don't even need z-index, since the newer elements are automatically higher in z-index.
HTML
<div class="fixed">
<img src="http://placekitten.com/800/300" />
This is some text that will be static as well
</div>
<div class="scroll">
Lorem ipsum dolor sit amet
</div>
CSS
.fixed{
position: fixed;
}
.scroll{
background: #eee;
height: 700px;
position: relative;
top: 350px;
}
Working example: http://jsfiddle.net/3vxBA/
That just looks like the header has a fixed position and a lower z-index, so when you scroll regularly, the page continues upward but the header stays in the same position behind the main contents.
Sample HTML:
<body>
<div id="header">
some image here
</div>
<div id="pagecontent">
everything else
</div>
</body>
Sample CSS:
body {
padding-top: 100px; /* #header height */
}
#header {
position: fixed;
top: 0px;
z-index: -1;
background-color: #ccccff;
height: 100px;
width: 100%;
}
#pagecontent {
background-color: #ccffcc;
height: 1000px;
width: 100%;
}
Here's this as a working example: http://jsfiddle.net/Nv7Ku/