When i testing the Hover effect and also the transition effect but it doesn't working. I can not find any problem. Please Help me. What should i do now.
What is the problem??
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="test">
<h1>This is header</h1>
<div class="images"><img src="img/them.jpg" alt="" /></div>
</div>
</div>
</body>
</html>
Css
.container{
width:900px;
margin: 0 auto;
}
.test{}
.test h1{
font-size:30px;
position:relative;
}
.images {
width: 258px;
position:absolute;
right:100px;
transition:.5s;
}
.images img{
width:100%;
}
.test h1:hover .images {
left:0px;
}
I believe you are missing a sibling selector:
.test a:hover ~ .images {
display: none;
}
Snippets:
.container {
width: 900px;
margin: 0 auto;
}
.test {}
.test h1 {
font-size: 30px;
position: relative;
}
.images {
width: 258px;
position: absolute;
right: 100px;
opacity: 1;
transition: opacity .5s;
}
.images img {
width: 100%;
}
.test a:hover~.images {
opacity: 0;
}
<div class="container">
<div class="test">
<a href="#">
<h1>This is header</h1>
</a>
<div class="images">
<img src="http://via.placeholder.com/350x150" alt="" />
</div>
</div>
</div>
If you want to apply transition on left:
.container {
width: 900px;
margin: 0 auto;
}
.test {}
.test h1 {
font-size: 30px;
position: relative;
}
.images {
width: 258px;
position: absolute;
right: 100px;
left: calc(100% - 358px);
opacity: 1;
transition: left .5s;
}
.images img {
width: 100%;
}
.test a:hover~.images {
left: 0px;
}
<div class="container">
<div class="test">
<a href="#">
<h1>This is header</h1>
</a>
<div class="images">
<img src="http://via.placeholder.com/350x150" alt="" />
</div>
</div>
</div>
Docs:
transition - CSS: Cascading Style Sheets | MDN
General sibling combinator | MDN
Your HTML doesn't match the rule you wrote:
.test h1:hover .images {
display:none;
}
There are a couple things you might be trying to do:
.test a:hover + .images {
display:none;
}
That will hide .images when you hover the h1. However, since your h1 is inside of an <a> you'll need to either remove that or put a class on the <a> and reference that instead of the h1. Or you can move the images div inside of the h1 and it will match the existing rule.
Related
I want a responsive img with text on top. Ive tried several different ways and I semi-get there with a bunch of kinks when I try to make it responsive, so I appreciate if anyone has a simple solution.
JSFiddle
Code snippet demonstration :
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<div class="container">
<h1>Header</h1>
</div>
</div>
You can try this , here is the code
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text within container</h2>
<div class="container">
<img src="abc.jpg" alt="abc" style="width:100%;">
<div class="centered">Centered</div>
</div>
</body>
You can make use of font-size: calc(2vw + 2vh + 2vmin) (tweak around the values to your need) to make text responsive with respect to viewport size :)
.container {
position: relative;
}
.container h1 {
position: absolute;
top: 0;
left: 20px;
font-size: calc(2vw + 2vh + 2vmin);
}
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<h1>Header</h1>
</div>
Try setting position to absolute or fixed
.img-fluid{
max-width:100%;
height:auto;
opacity:0.4;
position: absolute;
}
HTML:
<div class="banner">
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star">
<h2>This is a Star</h2>
</div>
CSS:
.banner img{position:relative; width:100%; height:auto;}
.banner h2{[psition:absolute; left:50%; top:50%; font-size:30px;
line-height:30px;}
for an image use the concept:
{
display: table;
position: relative;
width: 100%;
height: auto;
}
for text to display on image use the concept
{
display: table-cell;
verticl-align: middle;
position: absolute;
}
and adjust the text on image giving top or bottom or left or right}
use the class img-responsive to not to change the width and height of image in all the views.
Trying to get the header and images under it right in the middle of the page but am having a lot of trouble figuring out how to do that. Tried manipulating the box model with no luck. I'm really new to this stuff so any advice helps.
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 400px;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
You could use flexbox for this
body {
height: 100vh;
background: radial-gradient(gold, goldenrod);
font-family: monospace;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
Try something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
width: auto;
margin: auto;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
Issue is positioning and use of property left, top which even hide top text when you reduce screen size, instead you can change it's position to relative and then use margin to align that at center of page,
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
position: relative;
min-height: 400px;
background: red;
margin: auto;
display: inline-block;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="http://via.placeholder.com/100x100" alt="rock">
<img src="http://via.placeholder.com/100x100" alt="paper">
<img src="http://via.placeholder.com/100x100" alt="scissors">
<p></p>
</div>
Alright, so this can be done by a dirty little trick i learned when i started. Before i get to that, i would like to make some changes to your code:
A) No need for setting position: relative; for body because all the elements automatically move in relation to the body of your page. Setting the position to relative means that you are confining the position element of everything inside the body as relative. So it will ignore the absolute of the .container class.
B) Second, i don't see a reason why if you want to keep the header and the images together, you do not keep them under a single class. It makes it easier to move them around together rather than shifting one by one.
Now to the trick, for starters, you need to set the min-heightand min-width
of the container class in pixels. Once you have done that, you can position the class at the middle by:
top: 50%;
left:50%;
margin-top: -200px; /*half of the height of the container*/
margin-left: -200px; /*half of the width of the container*/
So, now your code, all summed up must something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
min-width: 400px;
min-height: 200px;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
<body>
<div class="container">
<h1>Choose Your Weapon</h1>
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script>
</script>
</body>
and guess what, it's even responsive :)
I want to apply transition to more than one div class.
I want to make an animated show so, I need to animate a lot of divs.
I have tried all possible sources on internet.
Here is my coding:
<html>
<head>
<style>
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width:400px;
}
</style>
</head>
<body>
<div class ="line1"></div>
</html>
Try like this: Demo
.line1 div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
margin:10px;
}
.line1 div:hover {
width:400px;
}
There is no problem to just create many divs with the same class.
<style>
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div :hover {
width:400px;
}
</style>
</head>
<body>
<div class="line1">
<div class="line1">
<div class="line1">
Or create multiple classes for different transitions:
.line1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.line2 {
width: 100px;
height: 100px;
background: black;
transition: width 2s;
}
.line3 {
width: 100px;
height: 100px;
background: green;
transition: width 2s;
}
div :hover {
width:400px;
}
</style>
</head>
<body>
<div class="line1">
<div class="line2">
<div class="line3">
Check out this on codepen http://codepen.io/antoniskamamis/pen/hjBrE
It is a great example of using css only to do transitions between a serious of divs.
HTML
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
CSS
body{background:#000;}
.container{
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
You need to define a Transition Class and a transition Hover class in CSS
In given code Make Div tag (which you want to trns) member of Trans class <div Class="Trans">
Here is code
<html>
<head>
<style type="text/css">
.Trans
{
margin:20px;
width: 100px;
height: 100px;
transition: width 2s;
background: gray;
}
.normal
{
margin:20px;
width: 100px;
height: 100px;
background: gray;
}
Div.Trans:hover
{
background: green;
width:400px;
}
</style>
</head>
<body>
<div Class="Trans">Div Trans</div>
<div class="normal" >Div_Normal</div>
<div Class="Trans">Div Trans</div>
<div class="normal" Div_Normal>Div_Normal</div>
</body>
</html>
Style
.Trans //Style You need to apply on transition
transition: width 2s;//Transition Statement Must be included in .Trans Class
.normal //Normal Div you don't need if you dont want to apply any style
.Div.Trans: Hover //Olly apply hover of a Div Which Having class of Trans
You can check it in given code snippest
.Trans {
margin: 20px;
width: 100px;
height: 100px;
transition: width 2s;
background: red;
}
.normal {
margin: 20px;
width: 100px;
height: 100px;
background: gray;
}
Div.Trans:hover {
background: green;
width: 400px;
}
<body>
<div Class="Trans">Div_Trans</div>
<div class="normal">Div_Normal</div>
<div Class="Trans">Div_Trans</div>
<div class="normal">Div_Normal</div>
</body>
Instead of adding transitions to each class, add them all together in a comma separated list
.line1, .line2, .line3 {
transition: 1s width ease;
}
I'm learning html and css, but I have some troubles.
Right now I'm making a site that has a small images with different w sizes.
The point is that, when you hover on them they show up clickable elements, and I can't get the right position on them.
What I have:
What I want:
Part of code for this:
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="zoom">
</div>
<div class="all">
</div>
<div class="link">
</div>
<div class="info">
</div>
<div class="like">
</div>
</div>
CSS:
.photo img {
float:left;
width:auto;
height:auto;
}
.photo:hover {
display: block;
opacity:0.6;
}
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
http://jsfiddle.net/zzu87/
You need to add some positioning to each image if you use position: absolute. Try something like this:
.photo:hover .zoom {
position: absolute;
top: 50%;
left: 200px;
background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat: no-repeat;
width: 46px;
height: 50px;
background-position: center;
}
This should get you where you want to go. (JS fiddle)
css
.photo {
display:block;
position:absolute;
background-image: url('//placekitten.com/400/300');
background-repeat: no-repeat;
width:400px;
height:300px;
}
.photo>.container {
display:none;
}
.photo>.container>div {
display:inline;
}
.photo:hover>.container {
display:block;
margin-left: 85px;
margin-top: 200px;
}
html
<div class="photo">
<div class="container">
<div class="zoom">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="all">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="link">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="info">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="like">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
</div>
</div>
First float the parent div left and set the position to relative. Then you'll have better control over the positioning of any child elements.
.photo {
float:left;
position:relative;
}
After, padding, margin, bottom, left, right, and top can be used to achieve the specific location desired inside the parent div. Here I used left and top...
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
left:50%;
top:50%;
}
Here is the FIDDLE.
Interesting question. I solved the problem by making more div containers for the photo and its contents. Also, I worked under assumption that your photo images are 400x300. Modify the code as you like! :)
I think the interesting part about my solution is that I used only position: relative; which lifts up the hover menu above your images so it plays together nicely:
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
Thus, most of the horizontal position is accomplished using margin: 0 auto; instead of playing too much with absolute or relative position. Generally speaking, those can be avoided most of the time. It depends.
The result can be also viewed from the following: js fiddle example or from this jsfiddle example if cat images are removed sometime later.
Linking also relevant code below:
HTML:
<div class="photo-container">
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
}
.photo-container {
width: 800px;
}
.photo {
float: left;
width: 400px;
}
.photo, .photo-menu {
width: 400px;
height: 300px;
}
.photo:hover {
display: block;
opacity: 0.6;
}
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
.photo .photo-menu {
display: none;
}
.photo:hover .photo-menu {
display: block;
}
.photo-menu .upper-menu {
background-image: url("http://www.kolazhgostar.com/images/small-img05.png");
background-repeat: no-repeat;
background-position: center;
width: inherit;
height: 200px;
margin: 0 auto;
}
.photo-menu .lower-menu {
width: 280px;
margin: 0 auto;
height: 100px;
}
.photo-menu .lower-menu div {
min-width: 40px;
width: 24.9999%;
height: 40px;
background-repeat: no-repeat;
background-position: center;
float: left;
}
.photo-menu .lower-menu .all {
background-image: url("http://placehold.it/40/ff0000");
}
.photo-menu .lower-menu .link {
background-image: url("http://placehold.it/40/00ff00");
}
.photo-menu .lower-menu .info {
background-image: url("http://placehold.it/40/0000ff");
}
.photo-menu .lower-menu .like {
background-image: url("http://placehold.it/40/c0ff33");
}
Note: I used placehold.it to place dummy images for the icons.
Cheers.
i m using a hover effect to change the images.when i hover on the first image it shows the another image which hasfew names which i want to link but coz this image is not visible in dreamweaver so i m unable to map it.
Here is the CSS for this:
div#content .promo{
display:block;
position:relative;
width:170px;
height:170px;
/* border:1px solid #f00;*/
float:left;
margin:10px;
/* border-radius:100px;*/
}
#content .promo .mask {
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 1.0;
position: absolute;
transition: opacity 0.45s ease-in 0s;
z-index: 1;
background-color:#FFFFFF;
/* border-radius:100px;*/
}
#content .promo:hover .mask {
opacity: 0;
filter:alpha(opacity=0);
}
Here is the code for image in div:
<div id="content">
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<div class="mask">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png"/>
</div>
</div>
</div>
There you go...
HTML
<div class="map">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" alt="Pearl" />
</div>
CSS
.map {position: relative;}
.link {position: absolute; width: 150px; height: 40px;}
.link.link1 {top: 20px; left: 10px;}
.link.link2 {top: 60px; left: 10px;}
.link.link3 {top: 100px; left: 10px; height: 50px;}
Fiddle: http://jsfiddle.net/praveenscience/6uwRP/
Do you want something like this?
HTML
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png" class="hover" />
</div>
CSS
.promo img.hover,
.promo:hover img {display: none;}
.promo:hover img.hover {display: inline;}
Fiddle: http://jsfiddle.net/praveenscience/dYExh/