I have an image description appear on hover. I make it transition up by changing the margin-top value. The problem is I want it to be able to take as much text as possible but still have everything appear over the image.
Here is a demo on JsBin.
.myslider{
overflow:hidden;
position: relative;
max-width:400px;
}
.myslider img{
width:100%;
}
.title{
position:absolute;
width: 100%;
height:20px;
padding-bottom: 2px;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background:black;
opacity:0.6;
}
.title-text{
color:white;
float left;
padding-left:5px;
}
.nav-buttons{
background: white;
float:right;
padding: 0px 5px 0px 5px;
border: 1px solid black;
margin: 0px 5px 0px 0px;
cursor:pointer;
}
.myslider:hover .title{
margin-top: 0px
}
.description {
text-align: center;
position:absolute;
width: 100%;
margin-top:0px;
transition: margin-top 200ms ease-in;
color:white;
background:black;
opacity: 0.6;
}
.myslider:hover .description {
margin-top: -20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="myslider">
<div class="title">
<span class="title-text">Image 1 </span>
<span class= "nav-buttons"> > </span>
<span class= "nav-buttons"> < </span>
</div>
<img src="http://placekitten.com/400/400">
<div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div>
</div>
</body>
</html>
Instead of using margin-top to animate, use transform property to do it using something like this:
.description {
text-align: center;
position: absolute;
width: 100%;
transition: transform 200ms ease-in;
color: white;
background: black;
opacity: 0.6;
}
.myslider:hover .description {
transform: translate(0, -100%);
}
and there you go! Cheers!
.myslider {
overflow: hidden;
position: relative;
max-width: 400px;
}
.myslider img {
width: 100%;
display: block;
}
.title {
position: absolute;
width: 100%;
height: 20px;
padding-bottom: 2px;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.6;
}
.title-text {
color: white;
float left;
padding-left: 5px;
}
.nav-buttons {
background: white;
float: right;
padding: 0px 5px 0px 5px;
border: 1px solid black;
margin: 0px 5px 0px 0px;
cursor: pointer;
}
.myslider:hover .title {
margin-top: 0px
}
.description {
text-align: center;
position: absolute;
width: 100%;
transition: transform 200ms ease-in;
color: white;
background: black;
opacity: 0.6;
}
.myslider:hover .description {
transform: translate(0, -100%);
}
<div class="myslider">
<div class="title">
<span class="title-text">Image 1 </span>
<span class="nav-buttons"> > </span>
<span class="nav-buttons"> < </span>
</div>
<img src="http://placekitten.com/400/400">
<div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div>
</div>
Also made some minor changes:
Used < and > for correct XHTML syntax
Added display: block to the image to remove the small whitespace below the image.
Don't use margin-top. Use bottom to anchor it to the bottom its parent.
Related
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
I am having two different issues. The first is really irritating. I am attempting to align the text with the image inside of the first box, so that they are side-by-side an inline fashion. I am not sure what I am doing wrong and I do not want to use floats.
Secondly, I am attempting to get the image to transform: translate on the x-axis on hover. The thing is, I want the image to transform on the .extra-box:hover...not on the actual image, but I only want the image to move. I cannot figure this out.
What am I doing wrong?
#extra {
margin: 25px auto;
width: 460px;
height: auto;
}
.extra-box {
position: relative;
width: 40%;
padding: 8px;
border-radius: 3px;
/*border: 1px solid #739BAF;*/
border: 2px solid black;
display: inline-block;
background: none;
transition: 0.5s ease;
}
.extra-box:hover {
border: 2px solid red;
transition: 0.5s ease;
}
.extra-box:first-child {
margin-left: 0;
width: 40%;
margin-right: 10%;
}
.extra-box:last-child {
width: 40%;
}
.extra-box a {
text-decoration: none;
}
.extra-box-text {
color: black;
font-size: 1em;
display: inline-block;
width: auto;
}
.extra-box-icon img {
padding-left: 5px;
width: 15px;
height: auto;
display: inline-block;
-webkit-transition: all .5 ease-in-out;
transition: all .5 ease-in-out;
/*transform: translateX(30px);
-webkit-transform: translateX(30px);*/
}
<div id="extra"><div class="extra-box">
<a href="contact">
<div class="extra-box-text">Need help?<br>Contact Us Now</div><div class="extra-box-icon"><img src="icons/right-arrow.png"></div>
</a>
</div><div class="extra-box">
<a href="register">
<div class="extra-box-text">Need an account?<br>Register Now</div>
</a>
</div>
</div>
As other answers pointed out, you were missing a display: inline-block, but the problem was in .extra-box-icon
I have also added the transform for the image: (See the beginning of the CSS)
.extra-box-icon {
display: inline-block;
}
img {
transition: transform 1s;
}
.extra-box:hover img {
transform: translateX(-100px);
}
#extra {
margin: 25px auto;
width: 460px;
height: auto;
}
.extra-box {
position: relative;
width: 40%;
padding: 8px;
border-radius: 3px;
/*border: 1px solid #739BAF;*/
border: 2px solid black;
display: inline-block;
background: none;
transition: 0.5s ease;
}
.extra-box:hover {
border: 2px solid red;
transition: 0.5s ease;
}
.extra-box:first-child {
margin-left: 0;
width: 40%;
margin-right: 10%;
}
.extra-box:last-child {
width: 40%;
}
.extra-box a {
text-decoration: none;
}
.extra-box-text {
color: black;
font-size: 1em;
display: inline-block;
width: auto;
}
.extra-box-icon img {
padding-left: 5px;
width: 15px;
height: auto;
display: inline-block;
-webkit-transition: all .5 ease-in-out;
transition: all .5 ease-in-out;
/*transform: translateX(30px);
-webkit-transform: translateX(30px);*/
}
<div id="extra">
<div class="extra-box">
<a href="contact">
<div class="extra-box-text">Need help?
<br>Contact Us Now</div>
<div class="extra-box-icon">
<img src="icons/right-arrow.png">
</div>
</a>
</div>
<div class="extra-box">
<a href="register">
<div class="extra-box-text">Need an account?
<br>Register Now</div>
</a>
</div>
</div>
Add vertical-align:top; in .extra-box class to align it to same level.
to fix the alignment issue and if you don't want to use float, you can change the display property of .extra-box-text and extra-box-text img to inline-block
.extra-box-text, .extra-box-text img{
display:inline-block;
width: /*adjust as needed*/
}
to deal with the animation, i suggest you set the image itself as a background of .extra-box, you would then change the background-position on hover
Hope this helps
I am using CSS transform and transition properties. When I hover the image, the button shows up as expected over the image. The problem I found now is that when I focus on the image by pressing the TAB key, the image simply disappears and only the button shows.
Html:
<div class="main">
<img src="phone.jpg" >
<div class="paragraph">This wil be centered</div>
<div class="content">
<button>Nokia 7210 Classic</button>
</div>
</div>
CSS:
.clearfix{
clear: both;
}section
{
text-align: center;
}
.main{
float:left;
width:30%;
text-align: center;
border:10px solid white;
width:306px;
height:306px;
margin : 50px auto;
box-shadow: 0px 0px 25px black;
overflow: hidden;
}
.paragraph{
-webkit-transform: translateY(-300%);
border: 5px solid grey;
background-color: grey;
opacity: 0.5;
}
.main:hover .content,
.main:focus .content{
-webkit-transform: translateY(-340px);
-webkit-transition: -webkit-transform 700ms;
}
.content{
width: 306px;
height: 306px;
background: rgba(51, 102, 255, 0.5);
}
img{
height:inherit;
width:inherit;
-webkit-transition: -webkit-transform 5000ms;
}
button{
width: 100%;
height: 50px;
margin-top: 100px;
background: black;
border: 0;
cursor: pointer;
color: white;
font: 16px tahoma;
}
button:hover{
opacity: 0.5;
}
How can I overcome this problem in a way that the same effect happens on FOCUS?
This question already has answers here:
inline-block list items mess up when one is empty
(4 answers)
Closed 6 years ago.
My goal is to create a container, and inside there are 6 tilecards each with different content on them. When I try to implement text into one of the divs, the divs under them all shift downwards.
Here's what it looks like when text is added.
I've looked for probably an hour and I haven't found a solution.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="header">
<p class="textheader"><b>websitetitle |</b></p>
</div>
<div id="navbar">
<div class="navitem">
<p class="navtext"><b>Home</b></p>
</div>
<div class="navitem">
<p class="navtext">Info</p>
</div>
</div>
<div id="boxinfowrapper">
<div id="preboxtextdiv">
<h1 id="preboxtext">title for box cards:</h1>
</div>
<div id="boxcontainer">
<div class="tilecard">
<p class="boxtext">Hello</p>
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
<div class="tilecard">
</div>
</div>
</div>
</body>
</html>
CSS:
#header {
background-color: #00ccff;
width: 100%;
height: 40px;
display: inline-block;
margin: 0px;
margin-top: -10px;
box-shadow: 0px 0px 0px 2px #50ADCC
}
body{
margin: 0px;
}
.textheader {
font-family: Verdana;
color: #FFFFFF;
margin-left: 10px;
position: relative;
}
#navbar{
width: 50%;
height: 40px;
background-color: white;
position: relative;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
text-align: center;
margin: 3px auto;
}
.navitem {
width: 80px;
height: 40px;
margin: 0 auto;
display: inline-block;
text-align: center;
}
.navitem:hover .navtext{
color: #4dd2ff;
}
.navtext {
color: black;
margin-top: 10px;
padding: 0px;
font-family: Courier;
font-size: 20px;
}
.tilecard {
margin-top: 30px;
width: 200px;
height: 200px;
background-color: lightgray;
display: inline-block;
position: relative;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-right: 10px;
margin-left: 10px
}
.tilecard:hover {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
background-color: gray;
}
#boxcontainer {
position: relative;
width: 720px;
height: 495px;
background-color: white;
text-align: center;
margin: 0px auto;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
#preboxtextdiv {
width: 600px;
height: 30px;
position: relative;
margin: 30px auto;
text-align: center;
}
#preboxtext {
color: #80bfff;
font-family: Helvetica;
}
#boxinfowrapper {
position: relative;
width: 100%;
height: 1000px;
background-color: #f0f5f5;
margin: 100px auto;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.2);
}
.boxtext {
position: relative;
vertical-align: top;
}
the reason lies in display: inline-block; for those containers - this will vertically align those elements along their baselines (= text base lines). To avoid that, add
.tilecard {
vertical-align: top;
}
here's the fiddle: https://jsfiddle.net/z0731w5x/
The default vertical-align is baseline. Without text, the baseline of an inline-block element corresponds to the bottom of its bounding rectangle, not the text that it would normally contain.
Align your tilecards by their tops and all will be well.
.tilecard {
vertical-align: top;
}
#boxcontainer {
position: relative;
width: 720px;
height: 495px;
->height: auto;
background-color: white;
text-align: center;
margin: 0px auto;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
Try this
I want to create a translucent background and display some text when user hover on the image like this http://demo.rocknrolladesigns.com/html/jarvis/#team . Is there anyway to make it without jquery?If yes,can anyone please teach me?
.container {
display: inline-block;
overflow: visible;
font-family: sans-serif;
font-size: 1em;
}
.theimg {
display: block;
width: 314px;
height: 223px;
border: solid 1px lightgray;
border-bottom: none;
transition: all .5s ease;
}
.container:hover .theimg {
opacity: 0.3;
}
.thename {
border: solid 1px lightgray;
text-align: center;
padding: 6px 0 6px 0;
transition: all .5s ease;
}
.container:hover .thename {
color: white;
background-color: #ffd600;
}
.thecover {
position: relative;
text-align: center;
top: -200px;
padding: 6px 0 6px 0;
opacity: 0;
transition: all .5s ease;
}
.container:hover .thecover {
top: -170px;
opacity: 1;
}
.thetitle {
font-size: 1.4em;
color: #515a7c;
font-weight: bold;
display: inline;
opacity: 1;
}
Yes, you can make it with CSS only:
<div class=container>
<img class=theimg src='http://demo.rocknrolladesigns.com/html/jarvis/images/team/team1.png' />
<div class=thename>MIKE ROSS</div>
<div class=thecover>
<div class=thetitle>FOUNDER</div>
</div>
</div>
See this and this for more info. jsfiddle
#wrapper span {
visibility:hidden;
position:absolute;
left: 50px;
top: 70px;
}
#wrapper:hover span {
visibility:visible;
}
#wrapper:hover img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div id="wrapper">
<img src="http://jonamdall.files.wordpress.com/2011/06/small-nyan-cat11.gif" />
<span>This is cat!</span>
</div>