I have a few images one on top of each other in a form of a "menu".
I would like that while I hover one of the images, it will show another image.
I also would like that while hovering each image, it will go up by 5px (currently it does not).
It must support Internet Explorer 7 or higher.
I hope what I have requested is possible and really appreciate any help you can provide.
My code so far:
.hw { font-size: 50px; padding: 50px; }
.first {
position: relative;
top: 0;
left: 0;
}
.second {
position: absolute;
right: 180px;
}
.third {
position: absolute;
right: 360px;
}
.logo {
position: relative;
bottom:60px;
left: 100px;
}
.first:hover, .second:hover, third:hover {
bottom: 5px;
}
.hidden {
display: none;
}
.logo:hover .hidden {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body dir="rtl">
<p class="hw">Hello World!</p>
<img class="hidden" src="http://i.imgur.com/MY5bRT1.jpg" style="position: relative; bottom: 80px; right: 500px;"/>
<div style="position: relative; left: 0; top: 0;">
<img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
<img class="third" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="logo" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
</body>
</html>
EDIT: solution:
.hw {
font-size: 50px;
padding: 50px;
}
.menu {
margin-right:300px;
}
.first {
position: relative;
top: 0;
}
.second {
position: absolute;
right: 180px;
}
.third {
position: absolute;
right: 360px;
}
.forth {
position: absolute;
right: 540px;
}
.logo {
position: relative;
bottom:60px;
left: 100px;
}
.first:hover, .second:hover, .third:hover, .forth:hover {
margin-top: 3px;
}
.img-con {
position: relative;
width: 300px;
padding-top: 50px;
z-index: 9998;
}
.img-con > img {
position: absolute;
top: 0;
left: 0;
}
.img-con > img.logo {
z-index: 1;
}
.img-con:hover > img.logo {
z-index: -1;
margin-top: 3px;
}
.img-con:hover > img.hidden {
top: -100px;
right: 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>bla bla</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body dir="rtl"><div class="center">
<p class="hw">Hello World!</p>
<div class="menu" style="position: relative; left: 0; top: 0;">
<div class="img-con">
<img class="logo" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="hidden" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
<img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
<img class="third" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="forth" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
</div></body>
</html>
I found a solution for you. You need insert every two image to container and set him with Relative position. Your images sets by Absolute position and you can play with there z-index on :hover to get the resolute.
Here we go:
.img-con {
position: relative;
width: 400px;
margin: 20px;
}
.img-con > img {
position: absolute;
top: 0;
left: 0;
}
.img-con > img.first {
z-index: 1;
}
.img-con:hover > img.first {
z-index: -1;
}
.img-con:hover > img.second {
top: -5px;
left: 5px;
}
<div class="img-con">
<img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
Related
I'm creating layered images right now but i need to somehow get text over each layered image. Every time I try adding it, it keeps just sitting next to the image itself. I can't get the positioning down.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
<div id="container">
<div>
<img class="imageOne" src="https://www.fillmurray.com/380/150/">
</div>
<div>
<img class="imageTwo" src="https://www.fillmurray.com/260/155/">
</div>
<div>
<img class="imageThree" src="https://www.fillmurray.com/270/100/">
</div>
</div>
I created a jsfiddle to see what it looks like with the images layered here:
https://jsfiddle.net/k1rpycq2/
I would use pseudo-selector to display text over the images, but the div element that contains the image must be of the same width as the image.
Do note that I had to switch the class attribute to the parent div element.
[edit] I don't like writing text in CSS so I used a data-attribute instead on the pseudo-element.
content: attr(data-caption);
#container {
position: relative;
/*width: 65%;*/
top: 0;
left: 0;
}
.imageOne {
display: inline-block;
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
.imageOne::before,
.imageTwo::before,
.imageThree::before {
content: attr(data-caption);
position: absolute;
top: 50%;
left: 0px;
right: 0px;
display: block;
transform: translateY(-50%);
padding: 0.5rem;
background-color: rgba(255,255,255,0.7);
font-family: Verdana;
text-transform: uppercase;
letter-spacing: 9px;
text-align: center;
}
<div id="container">
<div class="imageOne" data-caption="These">
<img src="https://picsum.photos/200/200">
</div>
<div class="imageTwo" data-caption="Beautiful">
<img src="https://picsum.photos/200/80">
</div>
<div class="imageThree" data-caption="Images">
<img src="https://picsum.photos/200/100">
</div>
</div>
What you can do, is to put the images as background in the targeted div elements using background-image and then positon your text in the div:
HTML
<div id="container">
<div>
text # 1
</div>
<div>
text # 2
</div>
<div>
text # 3
</div>
</div>
CSS
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
background-image:url(/image1-380x150.jpg);
background-size:contain;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
background-image:url(/image2-260x155.jpg);
background-size:contain;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
background-image:url(/image3-270x100.jpg);
background-size:contain;
}
What we need to do here is work with how position:relative and position:absolute interact. Anything which is absolute is positioned absolutely in relation to the nearest ancestor with postition:relative
Using this, create a bounding div to layer your figures. Then use the figure tag with position:absolute positioning the figcaption within that using position:absolute.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
[class^="image"] figure {
position: relative;
}
[class^="image"] figure>figcaption {
position: absolute;
top: 0;
background-color: rgba(255, 255, 255, 0.8)
}
<div id="container">
<div class="imageOne">
<figure>
<img src="https://www.fillmurray.com/g/380/150/">
<figcaption>Bill One</figcaption>
</figure>
</div>
<div class="imageTwo">
<figure>
<img src="https://www.fillmurray.com/260/155/">
<figcaption>Bill Two</figcaption>
</figure>
</div>
<div class="imageThree">
<figure>
<img src="https://www.fillmurray.com/270/100/">
<figcaption>Bill Three</figcaption>
</figure>
</div>
</div>
I am trying to design a website with a background scrolling slower than the foreground. I found a few different ways to go about doing this, and I decided on using CSS parallax. It works, however, it doesn't scroll by itself, and creates a scrollbar under my title bar. I am having trouble getting it to scroll by itself without a scrollbar. Here is a simple example of my code thus far.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title</title>
<link rel="icon" type="image/png" href="icon.png">
<div id="top">
<img src="icon.png" alt="Icon"
style="width:150px;height:150px;">
<nav>
Home  
<a href="b.html"/>B</a>
</nav>
</div>
</head>
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<img src="apt.jpg" alt="Apartment">
</div>
<div class="parallax__layer parallax__layer--base">
<h1>Welcome!</h1>
<p>Sample Text</p>
</div>
</div>
</body>
css/style.css
.parallax
{
-webkit-perspective: 1px;
perspective: 1px;
height: 100vh;
overflow: hidden;
position: relative;
z-index: -1;
}
.parallax__layer
{
position: absolute;
overflow: auto;
right: 0;
left: 0;
}
.parallax__layer--base
{
top: 150px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
margin-left: 15%;
margin-right: 15%;
}
.parallax__layer--back
{
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px) scale(2);
}
nav
{
position: fixed;
top: 0px;
z-index: 3200;
font-size: 40px;
top: 55px;
right: 30px;
}
a
{
text-decoration: none;
color: red;
}
h1
{
color: red;
}
p
{
color: red;
}
div
{
background-color: 2f2f2f;
}
#top
{
position: fixed;
top: 0;
left: 0;
height: 150px;
width: 100%;
background-color: 3c3c3c;
}
Thank you!
So, the solution to my problem isn't too complicated. First, you have to put everything you want this to apply to into a div, and you have to disable overflow in that div. Then in the child divs which you want to be able to scroll, you re-enable overflow, then you set that scrollbar to have a width of 0. You can also use that parent div to solve position problems such as the ones I ran into.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title</title>
<link rel="icon" type="image/png" href="icon.png">
<div class="navbar">
<img src="icon.png" alt="Red Star" style="width:150px;height:150px;">
<nav>
Home  
<a href=b.html/>B</a>
</nav>
</div>
</head>
<body>
<div class="base">
<div class="parallax">
<div class="parallax-layer parallax-back">
<img src="apt.jpg" alt="Apartment">
</div>
<div class="parallax-layer parallax-base">
<h1>Welcome to the website!</h1>
<p>Sample text!</p>
</div>
</div>
</div>
</body>
.parallax::-webkit-scrollbar {
width: 0;
}
.base
{
position: fixed;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.navbar
{
position: fixed;
top: 0;
left: 0;
height: 150px;
width: 100%;
background-color: 3c3c3c;
z-index: 3200;
}
.parallax
{
width: 100%;
-webkit-perspective: 1px;
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
z-index: -1;
}
.parallax-layer
{
position: absolute;
top: 0;
right: 0;
left: 0;
}
.parallax-base
{
top: 175px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
margin-left: 15%;
margin-right: 15%;
}
.parallax-back
{
width: 100%;
top: 150px;
-webkit-transform: translateZ(-3px);
transform: translateZ(-3px) scale(4);
}
nav
{
position: fixed;
top: 0px;
z-index: 3200;
font-size: 40px;
top: 55px;
right: 30px;
}
a
{
text-decoration: none;
color: red;
}
h1
{
color: red;
}
p
{
color: red;
}
div
{
background-color: 2f2f2f;
}
I have a navbar with a certain height and a logo that overflows. This logo is, of course, clickable, but it means that the part that overflows, is also clickable.
Is it possible to make the logo overflow, but not the clickable area?
HTML
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
JSFIDDLE
Something like this?
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
a {
display: inline-block;
height: 100%;
width: 100%;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
pointer-events: none;
}
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>
Just move logo outside of your link and put that link on rest of header:
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
display: inline-block;
}
<nav>
<a href="#">
</a>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
Change little bit of you structure.
Put <a> independent and pass link in it with following css.
HTML
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
nav a{
position: relative;
display: block;
height: 100%;
z-index: 1;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
Example : https://jsfiddle.net/67s4ajqf/3/
Don't place the whole div inside the a.
Place the link after the image, give it absolute positioning and carefully set the position and size.
The other answers make the whole header clickable. If it is not desired, use this solution. You may have to adjust the width of the clickable area.
See the example below:
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a.clickable-logo {
position: absolute;
display: inline-block;
left: 36px;
top: 36px;
width: 600px;
height: 100px;
}
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
<a href="#" class="clickable-logo">
</a>
</div>
</nav>
What about something like this?
HTML
<a href="#">
<div class="clear">
</div>
</a>
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.clear {
height: 100px;
background: 0;
position: absolute;
width: 100%;
z-index: 2;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
I'm trying to improve my basic design "skills". I'm attempting to recreate this:
but I don't know how to format it correctly with the right css.
.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
}
.cover {
position: absolute;
left: 10px;
top: 5px;
}
.icon {
position: absolute;
right: 10px;
bottom: 10px;
}
#container h3, p {
color: #000;
position: absolute;
left: 60px;
top: 15px;
margin: 5px;
}
<div class="container">
<img class="cover" src="book.png" width="45" height="60"/>
<h3>Title of Something</h3>
<p> Cracking the code </p>
<img class="icon" src="icon.png" width="45" height="40"/>
</div>
Any suggestions?
Here is the way to fix the issue, your html working fine
only the css need to be edit.
CSS
.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
float:left
}
.cover {
position: absolute;
left: 10px;
top: 5px;
}
.icon {
position: absolute;
right: 10px;
bottom: 10px;
top: 15px
}
h3, p {
color: #000;
position: relative;
left: 60px;
top: 15px;
margin: 5px;
}
DEMO
here is a very simple solution: http://codepen.io/elstermann/pen/oXRVxG
HTML
<header>
<img id=img-book alt=book src=http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png width=158 height=158>
<div id=title>
<h3>Title of Something</h3>
<p id=h1-sub>Title of Something</p>
</div>
<img id=img-face alt=book src=http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png width=158 height=158>
</header
CSS
header {
margin: 0 auto;
max-width: 950px;
min-width: 500px;
width: 90%;
}
#img-book, #title {
float: left;
}
#img-face {
float: right;
}
I have the following code: JSFiddle
HTML:
<div class="profile-image">
<img src="image.png" />
</div>
CSS:
.profile-image img {
width: 48px;
height: 48px;
position: absolute;
left: 12px;
top: 12px;
border-radius: 500px;
display: block;
}
The image tag in the HTML must be there.
How can I make it so that when you hover over the image in the image tags, it shows another image over top of it?
You can show another div on hover of parent div.
.imageBox:hover .hoverImg {
display: block;
}
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
<div class="imageBox">
<div class="imageInn">
<img src="http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif" alt="Default Image">
</div>
<div class="hoverImg">
<img src="https://lh5.googleusercontent.com/-gRq6iatuNYA/AAAAAAAAAAI/AAAAAAAAANk/674knqRN1KI/photo.jpg" alt="Profile Image">
</div>
</div>
Try something like this
<div class="profile-image">
<img src="image.png" />
<div class="image_hover_bg"></div>
</div>
<style>
.profile-image{
position: relative;}
.profile-image img {
width: 48px;
height: 48px;
border-radius: 500px;
display: block;
}
.image_hover_bg{
background: url("images/zoom_icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 171px;
position: absolute;
top: 0;
width: 210px;
z-index: -1;
display:none;
}
.profile-image:hover .image_hover_bg{display:block}
</style>
Got it myself.
HTML:
<div class="profile-image">
<img src="assets/img/avatar.png" />
<span class="overlay"></span>
</div>
CSS added:
.profile-image:hover .overlay {
position:absolute;
width: 48px;
height: 48px;
z-index: 100;
background: transparent url('overlay_image.png') no-repeat;
cursor: pointer;
}
I got it myself to show an image in the center of another image on hover
HTML:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<div class="imageBox">
<div class="imageInn">
<img src="background.jpg" alt="Profile Image">
</div>
<div class="hoverImg center">
<img src="sign-check-icon.png" alt="default image">
</div>
</div>
</html>
CSS:
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 350px;
top: 100px;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
Note that left: 350px and top: 100px will be changed based on your background-image in my case background-image was 700x200(width x height). So in order to position the image to the center just take half of width and height.
.figure {
position: relative;
width: 360px;
max-width: 100%;
}
.figure img {
display: block;
max-width: 100%;
height: auto;
}
.figure .image-hover {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
object-fit: contain;
opacity: 0;
transition: opacity .2s;
}
.figure:hover .image-hover {
opacity: 1;
}
<div class="figure">
<img class="image-main" src="https://demo.sirv.com/hc/Bose-700-a.jpg">
<img class="image-hover" src="https://demo.sirv.com/hc/Bose-700-b.jpg">
</div>