Zooming on hover - javascript

I have an image with a color overlay and i want to add a zooming on the image when user hover over the image.
I'm trying to achieve this without JQuery but to get the result I don't mind using JQuery.
Thanks in advance
Jsfiddle
HTML:
<div class="rss-output">
<div class="body"> <a target="_blank" href="#">
<div class="overlay-feed"></div>
<div class="imagefix zooming" style="float:none;">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>
CSS:
div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}
.rss-output .body {
width: 100%;
position: relative;
}
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 2;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}
div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}
div.imagefix img {
margin: -50%;
}

Use following css will do zoom effect:
.overlay-feed:hover + div.imagefix img{
transform: scale(2);
-webkit-transform: -webkit-scale(2);
}
Check your updated Fiddle

The solution proposed by Ketan is good, but I would add an animation, to make the zoom smoother:
For example:
transition: all 1s cubic-bezier(0.23,1,0.32,1);
See updated fiddle (forked from ketan's one): http://jsfiddle.net/alessiozuccotti/84n3hu6v/2/
Or you could change the timing function you prefer. This link may help you:
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

You can use css, for example:
.zoom_img img:hover{
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}

Related

How to replace the white in an image using Javascript?

Pinterest (here is an example) and some other sites replace the white in their images with a gray color. They do that for all of their images and it seems to be on the client side.
Is this possible using Javascript, or is there another way they are doing this?
Here's a quick & dirty example that might help get you started:
$('#container').on("mouseenter mouseleave", () => {
$('.overlay').toggle();
});
#container {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: .25;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'>
<img src="http://imagizer.imageshack.com/v2/600x742q90/537/xAgiLR.jpg" width="200px" height="247px">
<div class="overlay" />
</div>

How to make image scrolling effect inside other image?

i want to make something similar like this, to promote my sites in scrolling effect just like in this page
I found that image from computer is just a image:
and site scrolling inside is image also:
So my question is , how to make other image to scroll inside that computer PC, like on original site i provided, maybe some JS ?
This is similar solution i found:
HTML:
<ul id="scroller">
<li><img src="https://i.stack.imgur.com/lPcRz.jpg" width="400"
height="1000"></li>
</ul>
JS:
(function($) {
$(function() { //on DOM ready
$("#scroller").simplyScroll({
customClass: 'vert',
orientation: 'vertical',
auto: true,
manualMode: 'end',
frameRate: 8,
speed: 3
});
});
})(jQuery);
and CSS:
/* Container DIV */
.simply-scroll {
width: 400px;
height: 1000px;
margin-bottom: 1em;
}
but how to make this image inside PC image, and to move up and down ?
Here is what all you need.
.computer-empty {
overflow: hidden;
position: relative;
width: 540px;
}
.computer-screen {
overflow: hidden;
position: absolute;
height: 247px;
width: 445px;
left: 50px;
top: 20px;
}
.screen-landing {
left: 0;
line-height: 0;
position: absolute;
width: 100%;
transition: all 6s;
-o-transition: all 6s;
-ms-transition: all 6s;
-moz-transition: all 6s;
-webkit-transition: all 6s;
}
.screen-landing:hover {
cursor: pointer;
margin-top: -1036px;
}
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.computer-empty img.computer {
width: 100%;
}
<div class="text-align-center computer-empty">
<a target="_blank" href="http://irontemplates.com/demos/redirect.php?theme=The%20Rise" class="">
<div class="computer-screen">
<div class="screen-landing">
<img src="http://fwrd.irontemplates.com/home/img/the_rise.jpg" alt="demo - the rise">
</div>
</div>
<img class="computer" src="http://fwrd.irontemplates.com/home/img/computer.jpg" alt="computer">
</a>
<h1>The Rise</h1>
</div>
This might not be the best solution but the only one I can think of right now:
1) You could edit the picture of computer, cut the screen off and make it transparent.
2) Make 2 divs, one inside other.
3) First, bigger one will contain a picture of computer.
4) Second one will fill exactly the empty space in picture of computer, where screen would be.
5) Make sure to add overflow: scroll; in your stylesheet for inner div.
It would look something like:
HTMl:
<div>
<img src="path to your picture of computer">
<div class="img-box">
<img src="path to your picture of inside screen">
</div>
</div>
CSS:
.img-box{
width: ???;
height: ???;
overflow: scroll;
}
Now I am aware that this solution will be hard to make responsive, but it is the only think I can think of right now.

Stack customized windows(divs) using CSS

I'm doing a single page application where you're suppose to be able to open multiple customized windows on the page(not browser tabs/windows, but windows created with DOM). I want the windows to stack on top of each-other with a certain XY-offset. I've tried added a transform: translate(5%, 5%)to the divs after the first div, but it simply isn't working.
I want them to stack like this:
But right now, they´re just stacking on top of each other.
HTML:
<main>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
<div class=window><div class=app></div></div>
</main>
CSS:
main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 100%;
height: 100%;
top: 0;
}
.window {
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
}
Any ideas?
Try adding position: absolute to all the divs and use left: <num>px and top: <num>px to position them. Make sure the containing element is position: relative, otherwise the divs will be absolutely positioned relative to the "viewport".
See this article for more on absolute positioning.
Ok, this works with some caveats: http://codepen.io/anon/pen/dNbqgE
html:
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
css:
.card {
width: 100px;
height: 200px;
outline: 1px solid #cc0000;
position: absolute;
background: #ddd;
}
.card:nth-of-type(n + 1) {
transform: translate(5%, 5%);
}
.card:nth-of-type(n + 2) {
transform: translate(10%, 10%);
}
.card:nth-of-type(n + 3) {
transform: translate(15%, 15%);
}
.card:nth-of-type(n + 4) {
transform: translate(20%, 20%);
}
.card:nth-of-type(n + 5) {
transform: translate(25%, 25%);
}
The caveat is that you have to define a new nth-of-type rule for each level of card you need. If you're using less, sass, or other css build tool you can pretty easily setup a macro to generate any number of these.
transform: translate(...) applies to the element itself, not to the parent, so maybe that's the case it doesn't work for you. I would use a similar approach like the one mentioned by Jason Cemra. Check out this another answer, maybe it helps you: How to use transform:translateX to move a child element horizontally 100% across the parent
to position of window div's, we have to set x-y position relative to a known reference. if all win div's are in a same parent, we have use different offset for them: eg: transform: translate(5%, 5%); for first div, transform: translate(10%, 10%); for second div, and so on.
another way is to nest them in each other such that the same value of offset can be used for all divs, but as their parent have different position, they get desired position:
<html>
<head>
<style type="text/css">
#main {
transition: margin-left .5s;
padding: 20px;
position: fixed;
margin-left: 100px;
width: 800px;
height: 500px;
top: 0;
}
.window {
position:absolute;
z-index: 1;
left: 0;
top: 0;
width: 250px;
height: 400px;
border:1px solid navy;
transform: translate(5%, 5%); /* this is relative to current position */
}
</style>
</head>
<body>
<div id=main>
<div class=window><div class=app>w1</div>
<div class=window><div class=app>w2</div>
<div class=window><div class=app>w3</div>
</div>
</div>
</div>
</div>
</body>
</html>

Hover over picture in scroll list

I have pictures in a horizontal scroll and I want to be able to hover over each image, and when I do, I want the picture to be slightly "grayed out" with text over it.
I can't for the life of me figure out how to do it.
I made this fiddle to show what my scroll bar looks like.
https://jsfiddle.net/burgoyne/u1zdn80p/1/
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
Can someone point me in the right direction here? I have been trying different things with CSS to gray it out and add text, with no luck.
Thanks!
You have to specify what you want in a CSS img:hover rule, like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
#scroll img:hover {
opacity: .5;
}
<div id="scroll">
<a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" />
</div>
About the gray color over the image, you can just add opacity to the image on hover ("opacity: 0.5") and, if you want, some transition between the event and the "grayness" with "transition: 0.5s" or so.
About the problem with the text overlay, I think you should visit this answer: Text on image mouseover?
You can place text inside with class named
<span class="text-content"><span>Some text here</span></span>
and then u can use css to place text on the image, something like ...
span.text-content
{
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
I hope this helps.

How to force elements to be in middle?

I am using the following code to show some images but I can't figure out how to move them in middle. Does anyone has any idea?
CSS
.cover-image{
max-width: 300px;
max-height: 250px;
}
HTML
<div class="row" id="covers">
<div class="col-xs-6 col-sm-4">
<div class="cover" style="margin-bottom: 10px;">
<a target="_blank"><img class="cover-image" /></a>
</div>
</div>
</div>
JS
$.ajax({
type : 'GET',
dataType : 'json',
url: 'data.json',
success : function(data) {
var data = data.info;
var covers = document.getElementById("covers");
var blockTemplate = covers.getElementsByTagName("div")[0].cloneNode(true);
covers.getElementsByTagName("div")[0].remove();
data.forEach( function(obj) {
block = blockTemplate.cloneNode(true);
block.getElementsByTagName("a")[0].setAttribute('href', obj.link);
block.getElementsByTagName("img")[0].setAttribute('src', obj.cover);
covers.appendChild(block);
});
$("img").css({"vertical-align":"middle"});
}
});
A demo of what is showing now is here: http://tdhtestserver.herobo.com/test/
Just a try
Is this what you want
Have to use psuedo-css
.cover {
border:1px solid;
height:200px;
width:200px;
vertical-align: middle;
text-align: center;}
.cover:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.cover-image {
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align: middle;
}
This may make the question more clear.
Fiddle Demo
If you want to align image middle-center, you can set fixed size to your .cover and set the max-width and max-height to the a. Then you can align the a using absolute position and css transform. Example:
.cover {
width: 300px;
height: 250px;
position: relative;
}
.cover a {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Here is what I tried in JSFiddle:
http://jsfiddle.net/7w5fw7fw/
I placed the images directly into the div container:
<div class="row" id="covers">
<img src="http://sjhitsquad.net/wp-content/uploads/freshizer/3d142cc9444fe922cf69cf90e344ce5f_placeholder-920-350-c.gif">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="https://www.adspeed.com/placeholder-123x456.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
</div>
Wrapping every single image in a separate div doesn't appeal to me a lot. If there is such a need, than it is better to use <figure>, which is semantic.
And here is the CSS that places the images in the middle:
html, body {
height: 100%;
margin: 0;
}
#covers {
background: yellow;
width: 100%;
min-height: 100%;
text-align: center;
}
img {
max-width: 300px;
min-height: 250px;
vertical-align: middle;
}
The background color is there just to show you how wide and high the container is (as much as the whole body element). Depending on the window width the images may all appear in a single row or break into many rows.
Is this close to your searched behaviour?
Your question is not clear but i think you want this
try to add this on your body
body {
margin: auto !important;
}

Categories