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.
Related
I need to one image overlap an another. But the second image have background color and I need the first image between the second and second's background-color. It is possible? Already tried to made a new "div class" instead of style="background-color". Now i am stuck with this:
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: relative;
z-index: 3;
top: -75px;
}
.background {
position: relative;
z-index: 1
}
<div class="firstimage" style="max-width: 1170px;"><img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" /></div>
<div class="background" style="background-color: #f2e5df;">
<div class="secondimage">
<img src="" alt="" title="" />
</div></div>
You can't give certain properties of an element different z-index values. However for certain elements like a div you can use ::before and ::after pseudo elements. And you can set a z-index on those, effectively creating three layers. More information here.
In this case you can create a div with the middle img inside. Then add a ::before and ::after to that div. Giving one a background color and a z-index of -1. And the other a background image and a z-index of 1.
In the example below I also added some margin and a border around the inital div so you can better see what is going on.
.image {
margin: 20px 0 0 20px;
position: relative;
border: 3px solid coral;
width: 200px;
height: 300px;
}
.image::before,
.image::after {
content: '';
display: block;
width: 200px;
height: 300px;
position: absolute;
}
.image::before {
z-index: -1;
background: cornflowerblue;
top: 20px;
left: 20px;
}
.image::after {
z-index: 1;
background: url("https://www.fillmurray.com/200/300");
top: -20px;
left: -20px;
}
<div class="image"><img src="https://www.fillmurray.com/200/300" /></div>
If I understand right what you're trying to achieve, you probably should be placing the images within background div and placing the second image with position: absolute:
<style>
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: absolute;
z-index: 3;
top: 20px; /* use top and left values to place the image exactly where you want it over the first image */
left: 20px
}
.background {
position: relative;
z-index: 1;
background-color: #f2e5df;
}
</style>
<div class="mainRunner">
<div class="background">
<img src="image1.png" class="firstimage" />
<img src="image2.png" class="secondimage " />
</div>
</div>
It sets the background color as the back-most element, then on top of it the secondimage and the firstimage.
Thank everyone for their ideas. In the end the solution was simple. In the style was the double definition of second image. And the first of them was just partly commented. So my first post working right like this:
.secondimage img{
max-width: 100%;
height: auto;
position: relative;
top: -75px;
margin: 5px;
margin-bottom: 10px;
}
Now just need to find out how to close this question...
Thank you :)
The answer is simply no... there is no way to address a z-index to specifically a background of an element, z-index and all the other CSS properties work on the entire element, not on only its background.
You're going to have to find another way to do this, have you thought of using a div with not content, and the same size of the image, and then just setting a background color to that specific div?
My engagement-filtercontainer div used to sit directly above my engagement-graphcontainer unless it was expanded via button click, in which case it drops down into the graphcontainer overlapping. Now the engagement-filtercontainer has grown in size because of additional content and it overlaps my graph container which contained my svg. I need it to dynamically not do this even if my filter increases in size.
I have some divs that are contained in this order:
<div class="Engagement-Container">
<div class="Engagement-Body">
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer"
</div>
<div class="Engagement-GraphContainer"
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
</div>
</div>
</div>
</div>
Notice that the engagement-filtercontainer and graphcontainer are both within the engagement-graph div, and that my svg is contained within the graphcontainer.
In the below image you can see that the filter now with more content expands into the area (I have hidden with css thats why im showing it in dev mode, ive tried various methods to work around this but I think i need a definitive solution.
The CSS:
engagement-graph(parent div)
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
#include tablet() {
width: 65%;
}
}
Engagement-graph-container (contains the svg graph that i want to protect from unwanted overlap)
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
#include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
#include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
Filter-container (that is overlapping)
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
visibility: hidden;
&--Visible {
transform: translateY(0) !important;
}
#include landscape {
transform: translateY(-436px);
}
}
I wish for the filter to work as usual so when its expanded it will appear into the screen but when it is not, I don't want it encroaching upon the graph, no matter how large it gets. When the filter was smaller it was fine it never came into the screen, so it must not be dynamic in how it is sized.
Thank you if you can help.
I have 4 images which will be thumbnails for news articles. When the user moves their mouse over one of the images I want it to highlight. I have done this by placing a div of the same size over the image. I then tried to use JQuery to add a class to that div on mouse enter which would make it a slightly see through blue box as shown here.
HTML:
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
I know that in the JQuery I use .content as a reference to find the IDs of the news images faster. That does exist I just didn't copy in that far up the code because it would have resulted in a lot of code unrelated to my problem being pasted in.
CSS:
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-highlight
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
JQuery:
function highlightNews(newsDiv)
{
newsDiv.addClass('news-highlight');
}
function unhighlightNews(newsDiv)
{
newsDiv.removeClass('news-highlight');
}
$(document).ready(function()
{
var $content = $('.content');
var $news1 = $content.find('#news-1');
var $news2 = $content.find('#news-2');
var $news3 = $content.find('#news-3');
var $news4 = $content.find('#news-4');
function newsMouse(newsDiv)
{
newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
}
newsMouse($news1);
newsMouse($news2);
newsMouse($news3);
newsMouse($news4);
});
Now you're probably crying after seeing my JQuery, I'm trying to learn it on the fly so I don't really know what I'm doing.
Thanks in advance :)
Why don't you make it with pure css without nothing of js?
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
you can do this using pure CSS. basically highlighting is nothing but box-shadow or border on the hover.
.news-image:hover{
border:solid 1px red;
}
If you want to use JQuery to do something like this, one option is to use hover and toggleClass
$('.news-image img').hover(function() {
$(this).toggleClass('news-highlight');
});
.news-image {
float: left;
width: 33.3%;
padding: 5px;
box-sizing: border-box;
}
.news-image img{
transition: all 0.3s ease-in;
width: 100%;
}
.news-highlight {
opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
If I understand what you want correctly, you should just need to change the colour of the div on top of your images when they are hovered on. This can easily be done with CSS. This should work:
.news-highlight
{
background: rgba(51, 153, 255, 0);
}
.news-highlight:hover
{
background: rgba(51, 153, 255, 0.5);
}
This will give the div a semi-transparent blue colour when the user hovers the cursor over it, and the image will show through.
You could also change the images to a greyscale at the same time, which may improve the effect.
EDIT: I should have also stated that you need to change the order of your html to this:
<div class="col-5 parent-center">
<img src="images/news.jpg" class="news-image"/>
<div id="news1" class="news-highlight"></div>
</div>
now the .news-highlight div will appear on top of your img.
Here is jsFiddle how does hover effect work. Practice is the answer! jQuery not required for something this simple
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
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);
}
I have a container div of size 150x150 which contains an image of size 150x180. The div has overflow: hidden css property enabled so a part of the image is hidden. Div size is fixed 150x150, image height may vary from image to image though. When I hover on the div or image, I want to vertically move the image so that the hidden part of the image could be shown to the viewer.
To make this functionality work I've used jQuery. Here's what I'm doing (my css, html, jQuery code blocks):
$("#container").mouseenter(function() {
img_height = $(this).find('img').height();
$(this).find('img').animate({
'top': 150 - img_height
}, 300);
});
$("#container").mouseleave(function() {
$(this).find('img').animate({
'top': 0
}, 300);
});
#container {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid;
position: relative;
}
#container img {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img class="fl" src="http://media.dcentertainment.com/sites/default/files/superman-150x180.jpg" width="150"/>
</div>
Is it possible to achieve the same functionality by using css transitions? If the answer is yes, then how?
Try this. The main idea is setting initial vertical offset in style when image will be loaded.
<img onload="this.style.bottom = '' + (150 - this.offsetHeight) + 'px' src="..." />
But it is not entirely pure HTML/CSS solution.
.container {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
transition: bottom 0.3s;
}
.container img:hover {
bottom: 0 !important;
}
<div class="container">
<img src="http://media.dcentertainment.com/sites/default/files/superman-150x180.jpg" onload="this.style.bottom = '' + (150 - this.offsetHeight) + 'px'" />
</div>
height 100% should do the trick!
#container {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid;
position: relative;
}
#container img:hover {
height:100%;
}
<div id="container">
<img class="fl" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-"/>
</div>
Use transition on image.
Use fixed px height for the div that contains image.
No use to absolute position the image(only required if there are other elements inside the div
Here is the code
<div class="imgWrap">
<img src="http://lorempixel.com/g/150/180" alt="" class="img1">
</div>
and here is css code
.imgWrap{
width:150px;
height:150px;
overflow:hidden;
}
.img1{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.imgWrap:hover .img1{
margin-top:-30px
}
I have created a pen for this
http://codepen.io/Prashantsani/pen/BywmoN