I am trying to make a image gallery similar to one in anntaylor site.
I am able to change the main image on mouse hovering by changing the source of image.
Here is the code I applied:
<div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
<div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
<div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
<div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
<div id="viewpoint"><img src="p1.png" name="mainimage" alt="" /></div>
The CSS for the above code is :
#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}
The problem is on changing the image I am not able to get the fading effect.
Please provide with a suitable JavaScript code to get the fading effect.
Not going to go into details too far.. but doing a similar project and here's how I handled it...
<div id="slides">
...
<img src="..." class="trans prev" data-id="image1" />
<img src="..." class="trans shown current" data-id="image2" />
<img src="..." class="trans next" data-id="image3" />
...
</div>
Then in CSS, I use CSS3 transitions, where the .trans class is opacity of 0, and a z-index of 100, where .trans.shown is set to opacity 1 with a z-index of 200.
Javascript is used to pull the current image, remove the "shown" class, and update the classes as appropriate... .prev and .next set the left position to -100% and 100% respectively.
I also only maintain the current, prev and next images in the stack.. other images are removed from the DOM... this keeps things pretty light/fast. Combined with the jquery.swipe plugin for tablet support. Would show the link to the final product, but will not be up until next month.
jQuery fadeIn - http://api.jquery.com/fadeIn/
jQuery with the fadeIn (http://api.jquery.com/fadeIn/) and fadeOut methods (http://api.jquery.com/fadeOut/) should work for you
Related
I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.
Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)
As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.
[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png
MY HTML SO FAR
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ?
(works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
Any idea how I could manage to get this in a more logical way?
Any suggestions would be gladly appreciated. Thanks!
I'd wrap the anchor in a div to center it. That way you could style
anchor separately with px while maintaining its position relative to the img.
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
If you also style the .image-container with a background color
and opacity you can toggle those values on :hover.
The best way to keep buttons in place with respective to an image will be to have the container as
position: relative;
and buttons inside the div as
position: absolute;
and placed top and left with px or any unit that doesn't change with size.
But one major thing you can do is have your image as the background of image-container.
That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.
I hope this helps.
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
I am trying to animate image from left to right and then right to left at the bottom. This is the code i am using which is working fine.
This is the Demo.
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
</div>
I want this animation at the bottom of the screen with the transparent div background. When i am adding this line
<div id="animate" style="position:fixed; bottom:0px; right: 5px; z-index: 999">
Then the animation is not working. Any one can help me in this issue? Thanks in advance.
just remove top:50px; from your image style and use css for animate div
#animate{
position: fixed;
bottom: 0;
overflow:hidden;
left:0;
right:0;
height: 100px;
background: #eee;
}
DEMO
Try adjusting top property to calc(70%); 70% of parent element height
<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:calc(70%)"/>
</div>
jsfiddle http://jsfiddle.net/oa5pcfqe/2/ , https://jsfiddle.net/oa5pcfqe/2/embedded/result/
Try following:
<div id="animate" style="position:fixed; height:100px; bottom:0px; left: 5px; z-index: 999">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:0px"/>
</div>
Check Fiddle.
Just remove the parent "animate" div and style the image "bottom" as "0px".
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; bottom:50px"/>
Demo
https://jsfiddle.net/oa5pcfqe/5/
I am building my own website with Dreamweaver. I have an portfolio page with an gallery which I used from this tutorial: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/#comment-16950
The images from the tutorial are smaller but I want them bigger like: 324 by 322 px.
Also they make a columm of 4 images next to each other and I want to have 3 to each other.
But when I try that, my images don't go perfectly next to each other.
Here is what I have:
<div class="portfolio">
<article class="entry video">
<a data-rel="prettyPhoto" href="#">
<img class="top" src="images/knop-1.jpg" alt="">
<span class="magnifier"></span>
</a>
</article>
(this article div repeats for every new image)
Some of the CSS:
.portfolio {
width: 960px;
height:auto;
overflow: hidden;
position: relative;
margin:15px;
}
.magnifier {
background:url(images/knop-hover1.jpg) no-repeat center;
width:324px;
height:322px;
position:absolute;
top:10px;
left:10px;
bottom:10px;
right:10px;
opacity:0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
img.top {
position:absolute;
left:0;
right:5px;
}
I hope you guys can help me out.
Thanks!
It looks like you're missing the JQuery from the tutorial. You'll need to add that before it all works like the demo. I notice you're missing a closing /div tag and your img tag should close itself at the end like this: /> instead of just >.
If you want three images instead of four you can make them auto center by applying a width to a surrounding div that encompasses the individual images. Then that surrounding div needs to be inside a larger content div or main div. The main div will have a set width, floated left. Then you can set margin:0 auto; for the surrounding div and it will center everything. You can add some margin to the single image divs to give them some breathing room, too. I made a code snippet so you can see visually what I mean.
.main {
width: 700px;
float: left;
display: block;
background: pink;
}
.surrounding {
width: 510px;
display: block;
margin: 0px auto;
}
.single {
width: 150px;
float: left;
margin: 10px;
}
.single img {
width: 150px;
height: 150px;
}
<div class="main">
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
</div>
An observation, though. 3 images at 324px width are going to be at least 976px when side by side. That is larger than the width you've set for your page. Maybe you're referring to their sized once clicked?
How can you apply a translate to an element but make it move to a point on the page rather than relative to itself?
For example, in the code below the "card" elements will move 50, 100 relative to their starting position. What I want instead is for it to move to the center of the page.
<html>
<head>
<style>
.face {
-webkit-backface-visibility: hidden;
position: absolute;
height: 140;
width: 80;
overflow: hidden;
}
.card {
height: 100;
width: 80;
float: left;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
margin-left: 5px;
-webkit-transition-property: transform;
-webkit-transition-duration: 0.25s;
-webkit-transition-timing-function: ease-out;
}
.activated {
-webkit-transform: scale(2) translate(50px, 100px);
-webkit-transition-duration: 0.35s;
-webkit-transition-timing-function: ease-in;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('.card').click(function (e) {
e.preventDefault();
$(this).toggleClass("activated");
});
});
</script>
</head>
<body>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
</body>
</html>
I don't think you should be using translate() for that. I suppose you could simply calculate the correct values or manipulate the transform-origin using JavaScript, but that kind of defeats the purpose of using CSS transforms.
You can animate properties as well, so you could remove the translate() from .activate and change the transition property for .card to:
-webkit-transition-property: all;
You can then use "regular" CSS to do the positioning and the transition will do the rest. E.g. add these properties to .activated:
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;
There is rather a bit of a problem with that, though. While CSS can smoothly transition the top, left and margin properties nicely, it can't smoothly transition the position property, so when a card gets activated it'll jump to the top left first and then move smoothly to the center of the page.
I'm not sure if there's a solution to that other than positioning the original cards absolutely as well.
Also, using the translate(), the position of the other cards isn't affected when you activate one of them. In my example, though, the activated card is taken out of the flow, so the other cards will move left to fill up the gap (as floating elements do). That might not be what you want either. That wouldn't happen if you absolutely position all of them to start with, though.
Of course, there are plenty of questions in the specs themselves about issues like this considering they're still experimental:
CSS 2D Transforms
CSS Transitions