A div in which I would be sliding in images , I want the images to appear in only a certain area of the div, say a triangle shaped area. The rest of the div should just show whatever is underneath the div.
CSS:
#overlay {
width: 700px ;
height: 300px ;
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
background: url("img/overlay.png");
background-repeat: no-repeat;
}
HTML:
<div class="boxcat" id="websitesbox">
<div id="overlay"></div>
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
Here I would be sliding in the images into overlay, BUT I don't want the images to show up completely , instead just a part of the overlay div should be covered in the image.
Not sure If I am making any sense. If I am is this possible ?
Thanks
You want to use mask-image however it isn't widely supported by the browsers.
Here you can read about the spec: http://www.w3.org/TR/css-masking/
And here you can see the support: http://caniuse.com/#search=mask
you can next websitesSlider into overlay:
<div class="boxcat" id="websitesbox">
<div id="overlay">
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
</div>
Related
In Blogger paragraphs aren't wrapped in <p></p> tags and they are displayed as plain text with line breaks (<br/>). I want to hide the first image that appears before any text and not the first image if there is any text before it.
For example:
This is some text (image AFTER text should be visible):
<img src="image.png"/>
Hide image in this example:
<img src="image.png"/>
This is some text (image BEFORE text should be hidden)
since there is no way to manipulate text nodes in CSS, here is a clean way to fix your issue:
with absolute positioning the image to make it appear before text with adding padding the the parent post div
.post {
padding-top: 150px;
position: relative;
}
.post img {
display: none;
}
.post img:first-of-type {
display: block;
position: absolute;
top: 0;
left: 0;
height: 150px;
}
<div class="post">
Hello there is a hidden image below Hello there is a hidden image below
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="post">
<img src="https://via.placeholder.com/350x150" /> Hello there is a hidden image below Hello there is a hidden image below
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
</div>
I'm teaching myself how to create a parallax hover image using 5 layers, which is working perfectly, and I am able to resize the layers alright, but I'm having trouble with the positioning.
When resized to 150vw/vh the layers spill over the bottom and right side. I've tried a few things but not sure if I'm putting the css properties in the right place. 100vh/vw positions in the center but is too small for my header.
Should I be positioning in #scene or .img? And whats best practice for this kind of thing?
Heres what I have so far anyway:
<div class="section--parallax">
<div id="scene">
<div data-depth="0.2">
<img src="resources/img/layer1.png">
</div>
<div data-depth="0.6">
<img src="resources/img/layer2.png">
</div>
<div data-depth="0.3">
<img src="resources/img/layer3.png">
</div>
<div data-depth="0.6">
<img src="resources/img/layer4.png">
</div>
<div data-depth="0.2">
<img src="resources/img/layer5.png">
</div>
</div>
</div>
CSS
header {
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
#scene {
}
.section--parallax img {
width: 150vw;
height: 150vh;
}
JS
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
i am attempting to display images when the corresponding thumbnail is hover over using only css and am having trouble with the logic and don't know if it is even possible. i can do it in javascript if absolutely necessary.
Here is my latest attempt.
<div id='img-container' class='grd12'>
<img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
<img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
<img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
<img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>
</div>
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
<img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
<img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->
And the CSS
#img-container{
position:relative;
top:0px;
left:0px;
height:950px;
}
.slide-images{
position:absolute;
top:0px;
left:0px;
}
.thumbnail > img{
margin-left:auto;
margin-right:auto;
display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
display:none;
}
I believe this is possible using CSS alone, however it is not very scaleable and it might end up being easier and more appropriate to use Javascript for this. For example:
img#thumb1:hover ~ #img4>#image4{
display:none;
}
Your selector here is incorrect. The general sibling selector selects only elements after the first match. In this case, your image thumb is after your image, but this selector is looking for an image after an image thumb. This is the opposite of what you have. There is no 'sibling before' selector in CSS.
An easier solution, rather than fiddling around with CSS selectors, would just be to bind each thumbnail to a click event that changes the source of a single image tag each time (or alternatively, scrolls across/fades, whatever animation you're looking for). This way, you save on markup, don't need to worry about positioning as much, and can dynamically generate the image display.
For example, to get the ID of an image, you could bind a click event to each thumbnail and then grab the ID of the image which could stored in a data attribute:
$('.thumbnail').on('hover', function() {
var activeImg = $(this).data('imgid');
// From here, set the main image to have the associated image source
}
This is very possible to achieve with just CSS. The layout of your HTML is what needs to change. In this example:
Each thumbnail and full-size image is placed inside a div container
The full-size image is hidden with opacity: 0;
When the div container is hovered, the full-size image is given opacity: 1 and will fade-in thanks to the transition
z-index: 1 keeps the full-size images above the thumbnails
Full Example
.item {
float: left;
position: relative;
}
img {
display: block;
cursor: pointer;
margin: 5px;
}
.fullsize {
position: absolute;
opacity: 0;
transition: opacity 0.6s;
z-index: 1;
top: 0;
left: 0;
pointer-events: none;
}
.item:hover .fullsize {
opacity: 1;
}
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
How do I insert a div into a random location inside a container of divs? Similar to Insert a div in a random location in a list of divs except I'm not using a list.
Right now it appears inside a random container div, not randomly inside the container itself:
http://jsfiddle.net/frank_o/QXdL3/15/
HTML:
<div class="template" style="display: none;">
<div class="image">
<img src="http://placekitten.com/75/150">
</div>
</div>
<div class="main">
<div class="image">
<img src="http://lorempixel.com/75/150">
</div>
<div class="image">
<img src="http://lorempixel.com/75/150">
</div>
<div class="image">
<img src="http://lorempixel.com/75/150">
</div>
</div>
JS:
var template = $('.template').find('.image').clone(),
target = $('.main'),
targetChildren = target.find('.image'),
random = Math.floor(Math.random() * targetChildren.length);
targetChildren.eq(random).append(template);
You're almost there. You just need to change append to after; change:
insertionTargetChildren.eq(random).append(insertionTemplate);
To:
insertionTargetChildren.eq(random).after(insertionTemplate);
Your current code inserts the new div into another div as follows:
<div class="image" style="position: absolute; left: 150px; top: 310px;">
<img src="http://lorempixel.com/75/150">
<div class="image" style="position: absolute; left: 225px; top: 310px;">
<img src="http://placekitten.com/75/150">
</div>
</div>
The new version will produce the following:
<div class="image" style="position: absolute; left: 150px; top: 310px;">
<img src="http://lorempixel.com/75/150">
</div>
<div class="image" style="position: absolute; left: 225px; top: 310px;">
<img src="http://placekitten.com/75/150">
</div>
You were very close!
Instead of .clone(), try using .html() like my example below.
Also, I slightly changed your loop along with the random number generator.
Works very well now. Refresh the page to see three random kitty photos added somewhere within the other images.
WORKING EXAMPLE
This will put it in random position:
random = Math.floor(Math.random() * (targetChildren.length+1));
if(random > targetChildren.length){
target.append(template);
}else{
targetChildren.eq(random).before(template);
}
The targetChildren.length+1 is to add the possibility of appending in the last place ;)
I am trying to have my background cover the page to create the parallax effect. Its the only thing missing as of now. Each "slide" div should cover the page. Here is the jsfiddle displaying the problem.
For my slides i am using the css styles:
.slide { background-attachment:fixed; width:100%; height:100%;
position: relative; padding:30px;}
and the html
<div class='slide' id='slide1' data-slide='1' data-stellar-background-ratio='0.5'>
<div class='container'>
<div class='row'>
<div class='col-md-6 slide-1-logo'>
<img src="img/MCP-LOGO-64x55.png" class='mainimg'>
</div>
<div class='col-md-6'><h1> Welcome!</h1></div>
</div>
</div>
<a class='button' data-slide='2' title=''></a>
</div>
You're .main class should have
height: 100%.
for the content to stretch fully.