I am setting up a webpage so that it has multiple images on it, and each image has a 50% opacity mask over it. When the mask is moused over, it is supposed to disappear, and then when the mouse leaves the image (below the mask), the mask is supposed to reappear. This worked well when I tested it for one img inside my div, but when I added a second img, the disappear function affected the image with no id, which is confusing me greatly.
HTML:
<div id="images">
<img id="testimage1" src="url" onmouseover="appear1()"/>
<img src="url"/>
</div>
<div id="masks">
<img id="testmask1" src="url" onmouseover="disappear1()"/>
<img src="url"/> <!-- This is the one that disappears -->
</div>
CSS:
#images{
position:absolute;
top:0px;
}
#masks{
position:absolute;
top:0px;
}
JS:
function disappear1(){
//Makes the first test mask disappear. This is a test function.
document.getElementById("testmask1").style.display = 'none';
}
function appear1(){
//Makes the first test mask appear. This is a test function.
document.getElementById("testmask1").style.display = 'block';
}
EDIT: Roko asked why I didn't do this in pure CSS. Aside from the fact that I didn't think about how to configure the images correctly, when I eventually finish this page, I will want to have masks 'linked', where I mouse over one mask and both disappear. I'm not sure that's possible in pure CSS.
EDIT #2: As it turns out, the function was working as written. It was just that because I had a single div for each row of images, when the first image in the row appeared, everything else slid over, thus poor coding on my part.
Don't duplicate your ID. ID should be unique-per-page.
Also, why not do it in pure CSS? (no JS required)
jsBin demo
<div class="imgBox">
<img src="cat.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="bear.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="elephant.jpg">
<img src="mask.png">
</div>
CSS:
.imgBox{
position:relative;
/*width, height etc... */
}
.imgBox img{
position:absolute;
top: 0;
transition: opacity 0.5s; /* yey! */
}
.imgBox:hover img + img{ /* on hover target the second image */
opacity: 0;
}
Related
I have script which detects two h4 elements and by position absolute it puts lines on them.
how lines look like
if you scroll they start to fill with orange color. But since they are put as position absolute on entire body, the problem is when those elements are going into an DIV with background-color:orange because the lines that are filling are also orange and I would like to make them blue, by adding something like filter: Invert
problem with orange line on orange background
So here is a question, if it's possible to make the line blue only if the lines are placed on that DIV with BG orange?
Maybe somehow it's possible to do it with JS viewport?
I will not add codes here of what I done because it's too long and too complicated.
But here is a short code of what I mean to help visualize the problem:
<div style="height:400px; width:100%;">
</div>
<div style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
So the smaller orange div have border grey to help you see the whole orange div which is placed partialy on other div with background orange. So I want to achieve that the part of smaller orange block become different color for example blue if it's visible on that bigger orange div.
And ofcourse I cannot just put the smaller div inside of big one, because everything is placed with scripts that are complicated so I do not want to rewrite whole code. But if ofcourse if what I want to achieve is not possible then I will need to change whole block to different color and that's it.
SOLUTION!
Ahhh managed to do it with the trick of adding another DIV that detect position top of orange DIV and height of it, and places transaprent div on it with backdrop-filter.
orange line changes to blue when entering orange div
The code without complicated JS that check top position of element.
<div style="position:relative;">
<div style="height:400px; width:100%;">
</div>
<div class="backdrop-reverse" style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
<!-- additional invisible block that changes color of everything on orange div -->
<div style="backdrop-filter: hue-rotate(200deg); width:100%; height:400px; position: absolute; left:0; top:400px; content: ''; z-index:100; pointer-events: none;"></div>
<style>
.backdrop-reverse{
overflow: hidden;
filter: hue-rotate(160deg); /*Just a bit if luck with hue rotation, it creates very similar orange color, but it's not the same, might be problem with different hue rotations*/
</style>
</div>
I am trying to integrate a simple slider within my website and found this example on jsfiddle
I do want to place the slider "relative" within my website, but if I change the css to
position: relative; the slider does not work properly anymore, as it now displays the fading images above one another like this
Why is this happening and how can I position the slider-div "relative" within my website?
I tried wrapping it with another div-layer but without success.
Try a wrapper div as you say.
You should put your slider inside another div and then position this wrapper div relative.
HTML:
<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
<img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
<img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
<img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
<img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>
CSS:
#wrap{
position:relative;
top:100px;
left:100px;
}
DEMO
UPDATE
To float within the website add a height to the #wrap
#wrap{
position:relative;
top:0px;
left:100px;
height:250px;
}
DEMO2
You don't need a wrapper. You are setting position: relative on the wrong element. Set it on #banner_area, not #banner_area img. DEMO
I have been trying to figure this out for a while and everything I try fails to produce the result I am after.
So the setup is as follows
HTML
<div class="container">
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
</div>
CSS
.icon-holder {
float:left;
height:100%;
width:auto;
}
.container {
height:100px;
}
.icon {
height:auto;
width: auto;
max-height: 100%;
display:block;
}
.container-before {
height:100px;
}
.container-after {
height:20px;
}
Now the problem lies in that if I use javascript to resize the container I need the images to resize with it and have no spacing in between. I need a CSS solution that works, I know I can hack it with JS but thats not what I am trying to accomplish.
I have an example running at http://jsfiddle.net/twmxh/3/ of the whole issue with expected output.
UPDATE
Just a bit more about the implementation. The container div is actually a toolbar with a resize handle. So the container is the only element I can apply the new height on.
Can you do this
$("#resize").click(function() {
$('.container').height("20px");
$('.container .icon').width("20px");
});
This appears to be triggering some funny browser bugs - it works fine essentially in both Firefox and Chrome, but both screw up on the element resize in different ways. In IE10 your sample doesn't run at all.
However, for the intended result you shouldn't be using animate at all in these modern CSS3 days, just use CSS transitions instead, like this example Fiddle solving your case to work in all current browsers.
Try switching your CSS for the image size
width: 100%;
height: auto;
i don't think heights and percentages behave well in most browsers
This is generally how you can define the size for a "responsive" image... whereas the width will always fit the size of the container, and the height will follow suit automagically.
edit your code so that the animation scales by width rather than by height. see if that works.
Try adding to the dynamically changed widths
clear:right;
this will refresh the container
heres a link
http://www.w3schools.com/cssref/pr_class_clear.aspenter link description here
I have two divs with:
width:100%; height:100%
so my whole document has an height of 200%;
both div`s have an link to each other,
now when i click on the link, i want that the site smoothly slides to the other div,
I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!
I tried to achive it with translateY, but it didnt worked!
Here is an exemplary code:
http://jsfiddle.net/hSU7R/
The HTML
<div class="full" id="one">
<span style="width:100%; background-color:blue">
<a href="#two" >Scroll to 2</a>
</span>
</div>
<div class="full" id="two">
<span style="width:100%; background-color:blue">
<a href="#one" >Scroll to 1</a></span>
</div>
The CSS
html,body {
width:100%;
height:100%;}
.full {
height:100%;
width:100%;}
#one {background-color:green}
#two {background-color:red}
Is this what you're looking for? A fork of your jsFiddle.
There has to be a smarter way to do this, but that's why we have jQuery right? My basic idea was to grab each anchor and turn off the default click response. Then, replace it with one that starts a setInterval chain. Each time the interval transpires, the window will incrementally scroll based on a frame rate and an estimated total run time. The actual run-time seems to take longer than the input time, but it at least gives you a way to get started.
What is the main disadvantage to using jQuery? I would think you'd get better performance from their implementation, since the jQuery people work on this stuff all the time.
You can control the scroll (speed, direction, position(?)) behavior with css.
CSS3 transitions enables to specify the way an element will go from a state to another while scroling is not an element. But you can position the body.
There is 'scroll-snap-points' wich might relate.
A CSS technique that allows customizable scrolling experiences like
pagination of carousels by setting defined snap points.
jsfiddled example
CSS
.gallery {
font-size: 0;
margin: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-points-x: repeat(1000px);
scroll-snap-type: mandatory;
white-space: nowrap;
width: 1000px;
}
img {
width: 100%;
}
HTML
<div class="gallery">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>
Its pretty simple to see what I mean if you look at the image, which I also need to shrink back if you click it again, it needs to be animated as well:
The image link http://www.keironlowecreative.x10hosting.com/Help.png
jquery
$(document).ready(function(){
$("#what > img").click(function () {
$("img").toggle("slow");
});
});
html
<div id="what">
<img src="small_img" />
<img src="big_img" style="display: none" />
</div>
toggle
You could use one of the horizontal accordion plugins for this.
Excuse the inline styles... Pixels aren't exact. Use the same image twice, one div on top of the other:
<div id="wrapper" style="position:relative; height:20px;">
<div id="top" style="background:url(...) top left no-repeat; position:absolute; height: 20px; width:18px; top:0; left:0; z-index:2;"></div>
<div id="under" style="background:url(...) top right no-repeat; position:absolute; height:20px; width:20px; top:0; left:2px; z-index:1;"></div>
</div>
So the top div is showing the plus and the left corner. The bottom div is showing the right corner - over two pixels so it's not showing under the corners of the top element. If the image is opaque, this doesn't matter...
Animate the width of the under div to get the effect. No fading, only one image. Should be small and quick to animate.