Text on my image is not appearing. Its animating but i want text on my image on mouse hover. For text I used button with image that suppose to popup on mouse hover.let me know my mistake. I am using this code from youtube tutorial.
.main
{
border: 10px solid white;
width:378px;
height:250px;
margin:50px auto;
box-shadow:0px 0px 25px black;
overflow:hidden;
}
.main:hover img
{
-webkit-transform:scale(2,2) rotate(45deg);
}
.main:hover .content
{
-webkit-transform:translate(-311px);
}
img
{
-webkit-transition: -webkit-transform: 300ms;
}
.content
{
width:378px;
height:250px;
background: rgba(124,120,120,0.5);
-webkit-transition: -webkit-transform: 300ms;
}
button
{
width:100%;
height:50px;
margin-top:200px;
background:black;
border:0;
cursor:pointer;
color:white;
font:16px tahoma;
}
button:hover {
opacity: 0.5;
}
<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>
You can use the position absolute to move your text/button above the image when hover.
CSS
.main:hover .content{
z-index: 9999;
position: absolute;
top:0;
}
DEMO HERE
you can try this one:
<div class="main"><img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>
DEMO
Related
I'm trying to make a hidden div to be reavelead using transition but I mess things up and it doesn't work.
I got a div on top of another but I have it hidden using the visibility property. Now when I hover over the bottom div (.hexagon) I have the top div (.product-text) displayed. Everything works just fine. Although I want to make it a little bit smoother using a transition, but it just doesn't work.
The css (I'm using Sass) :
(the bottom div):
.hexagon {
position: relative;
background-color: black;
width: 240px;
height: 138.56px;
margin: 69.28px 0;
border-left: solid 5px $honey;
border-right: solid 5px $honey;
display:flex;
justify-content: center;
img{
height:100%;
z-index: 1;
}
&:hover{
background-color:white;
cursor: pointer;
.product-text{
visibility: visible;
transition: visibility 3s;
}
}
}
.....
(the top div):
.product-text{
text-align: center;
font-size:18px;
color: black;
text-shadow: 2px 2px 3px $honey;
border-radius: 7px;
font-weight:bold;
opacity: 0.8;
z-index:2;
position:absolute;
bottom:0;
left:0;
width: 100%;
height:100%;
visibility:hidden;
background-color: rgba(15, 1, 1, 0.555);
p{
margin:0em;
}
}
You can't transition visibility (nor any other binary property). What you can do is an opacity transition.
.hexagon {
&:hover {
.product-text {
opacity: 1;
}
}
}
.product-text {
opacity: 0;
transition: opacity 3s;
}
You probably want the transition property applied directly to the class and not to the hover state.
Example:
.parent {
width: 200px;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
opacity: 0;
transition: opacity 2s;
}
.parent:hover .child {
opacity: 1;
}
<div class="parent">
<div class="child"></div>
</div>
I'm using code from Reveal Text from center with CSS Animation to reveal text from the center. But I'd like to keep the text visible after the animation is over. Right now, the text disappears after the animation. I'm new to css animation, so I'm not sure what the right thing to do is.
css:
.text-div {
color:white;
text-align:center;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top:45%;
font-weight: bold;
}
.text-div:before {
left:0;
}
.text-div:after {
right:0;
}
.text-div:after,.text-div:before {
position:absolute;
content:"";
height:100%;
width:50%;
background:black;
animation: revealText 3s;
}
.content {
background:black;
height:200px;
width:200px;
position:relative;
}
#keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
html:
<div class="content">
<div class="text-div">
The subculture
</div>
</div>
Add animation-fill-mode:forwards to .text-div:after,.text-div:before as below,
.text-div:after,.text-div:before {
position:absolute;
content:"";
height:100%;
width:50%;
background:black;
animation: revealText 3s;
animation-fill-mode:forwards; /*Add this*/
}
The animation-fill-mode CSS property specifies how a CSS animation
should apply styles to its target before and after it is executing.
.text-div {
color:white;
text-align:center;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top:45%;
font-weight: bold;
}
.text-div:before {
left:0;
}
.text-div:after {
right:0;
}
.text-div:after,.text-div:before {
position:absolute;
content:"";
height:100%;
width:50%;
background:black;
animation: revealText 3s;
animation-fill-mode:forwards;
}
.content {
background:black;
height:200px;
width:200px;
position:relative;
}
#keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
<div class="content">
<div class="text-div">
The subculture
</div>
</div>
Good evening,
I am trying to make image hover overlay with text, but displayed text is always on the top of the image. I would like to display it in the middle of it.
I've tried padding etc, but it moved the overlay as well, that it covered also the free space below the image. Could you please help me, how to margin only text from top? Thank you!
EDIT: Or the best solution would be, if I could include another div with text only. Because I need to include text with html tags and it's not possible this way, via "content:"
http://jsfiddle.net/sL6bjebx/
Here is CSS code:
.image {
position:relative;
margin: 0 auto;
}
.image img {
width:100%;
vertical-align:;
}
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
If your overlay text is going to be a one liner then you can use line-height css property to make it vertically center aligned
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
line-height:300px;
}
and if not, then I will suggest to use another way to display the content.
such as :before just like this fiddle, Or you can use a <p> tag as well instead of the :before tag check this fiddle.
.image:after {
content:'';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
z-index:1
}
.image:before {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 20px;
top:0; left:0; right:0;
bottom:0;
opacity:0;
margin:auto;
z-index:2
}
.image:hover:after {
opacity:1;
}
.image:hover:before {
opacity:1;
}
Here is the solution with another div or something, where would be possible to insert text with HTML tags:
.image {
position:relative;
margin: 0 auto;
width: 317px;
height: 317px;
text-align: center;
}
.image img {
width:100%;
vertical-align:;
}
.image .overlayText {
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
line-height:317px;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
margin:0;
}
.image:hover > .overlayText {
opacity:1;
}
<div class="image">
<img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
<p class="overlayText"><b>Here</b> is some text</p>
</div>
You should simply add line-height
.image {
position:relative;
margin: 0 auto;
}
.image img {
width:100%;
vertical-align:;
}
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
line-height:317px;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
<div class="image" style="width: 317px; height: 317px; text-align: center;">
<img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
</div>
On my jsfiddle, I actually have a text on top when mouse is over images. I would like to know how can I center this text vertically with css.
here is my jsfiddle -> www.jsfiddle.net/kodjoe/4kurw7ap/
I know that I've to use display:inline-block with vertical-align:middle, but nothing change ;-/ perhaps I've forgotten something ??
HERE IS MY UDAPTED CODE:
HTML:
<div id="wrapper"><div id="list">
<div alt="text here" class="item"><img class="imggrid" src="http://s5.favim.com/orig/141028/coffee-fashion-girl-grunge-Favim.com-2187377.jpg" alt=""></div>
<div alt="text here" class="item"><img class="imggrid" src="http://images0.chictopia.com/photos/highglossfashion/5948104335/high-gloss-fashion-dress_400.jpg" alt=""></div>
</div></div>
UDAPTED CSS:
body { background: #f1f1f1; }
#wrapper { max-width: 1260px; margin: 0 auto; }
#list {
overflow: hidden;
margin-bottom: -30px;
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 30px;
column-fill: auto;
}
.imggrid { width:100%; padding:10px;}
.imggrid:hover{ opacity: 0.9; }
.item { vertical-align: top; display: inline; margin-bottom: 30px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; }
#media only screen and ( max-width: 1024px ) {
#wrapper { max-width: 860px; margin: 0 auto; }
#list { -webkit-column-count: 2; -webkit-column-gap: 15px; -moz-column-count: 2; -moz-column-gap: 15px; column-count: 2; column-gap: 15px; }
.item { margin: 0px auto 15px auto;}
}
#media only screen and ( max-width: 600px ){
#wrapper { max-width: 440px; margin: 0 auto; }
#list { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
}
div { position:relative; display:inline-block; }
div:after {
content: attr(alt);
height:80%;
width:80%;
margin: 0 auto;
position:absolute;
top:10%;
left:10%;
background:rgba(255, 255, 255, 1);
text-align:center;
color:black;
display:inline-block;
box-sizing:border-box;
opacity:0;
transition: 0.4s all;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
}
div:hover:after { opacity:1; }
Please Try this one:
div { position:relative; display:inline-block; vertical-align:middle; }
.centerDiv{
position:absolute;
left:50%;
top:50%;
}
.container
{
text-align:center;
}
.centerDiv {
content: attr(alt);
height:80%;
width:80%;
margin: 0 auto;
position:absolute;
top:10%;
left:10%;
background:rgba(255, 255, 255, 1);
text-align:center;
color:black;
display:inline-block;
box-sizing:border-box;
opacity:0;
transition: 0.4s all;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
}
.centerDiv:hover { opacity:1; }
.content{
top: 50%;
transform: translateY(-50%);
position:relative;
}
}
DEMO
Include padding-top for div:after
div:after {
padding-top:33%;
}
Could you use something like this?
Codepen http://codepen.io/noobskie/pen/WQvOYX?editors=110
All I've done is added the classes first-img & second-img and added padding to :after on the top of each one adjusted based on the image height.
I've actually never seen alt text used on a div like that i think it would probably be better to put the img and a p tag inside a div add position:relative; on the div and position:absolute on the p tag, it might be easier for you to work with.
here is some documentation on it https://css-tricks.com/design-considerations-text-images/
Try the following code
Add the following code in CSS.
CSS
#box{
text-align: center;
vertical-align: middle;
line-height: 80px; /*The same as your div height*/
}
Add the following code in div tag.
div tag
<div alt="text here" ID="box">
Use a flexbox and center vertically using justify-content and horizontally using align-items. In this way the text can be more the one line, and we don't need to know the height of the ::after (fiddle):
div::after {
display:flex; /** don't forget to remove the display: inline-block **/
justify-content: center;
align-items: center;
padding: 10%; /** not necessary but looks better with long text **/
content: attr(alt);
height:80%;
width:80%;
margin: 0 auto;
position:absolute;
top:10%;
left:10%;
background:rgba(255, 255, 255, 1);
color:black;
box-sizing:border-box;
opacity:0;
transition: 0.4s all;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
}
i would recommend solving this using some child elements. http://jsfiddle.net/4kurw7ap/1/
div { position:relative; display:inline-block; vertical-align:middle; }
.centeredDiv{
position:absolute;
left:50%;
top:50%;
}
.container
{
text-align:center;
}
.centeredDiv {
content: attr(alt);
height:80%;
width:80%;
margin: 0 auto;
position:absolute;
top:10%;
left:10%;
background:rgba(255, 255, 255, 1);
text-align:center;
color:black;
display:inline-block;
box-sizing:border-box;
opacity:0;
transition: 0.4s all;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
}
.centeredDiv:hover { opacity:1; }
.content{
top: 50%;
transform: translateY(-50%);
position:relative;
}
}
<div alt="text here">
<div class="centeredDiv">
<div class="content">text here</div>
</div>
<img src="http://s5.favim.com/orig/141028/coffee-fashion-girl-grunge-Favim.com-2187377.jpg" />
</div>
<div class="container" alt="text here">
<div class="centeredDiv">
<div class="content">text here</div>
</div>
<img src="http://images0.chictopia.com/photos/highglossfashion/5948104335/high-gloss-fashion-dress_400.jpg" />
</div>
div { position:relative; display:inline-block; vertical-align:middle; }
.centeredDiv{
position:absolute;
left:50%;
top:50%;
}
.container
{
text-align:center;
}
.centeredDiv {
content: attr(alt);
height:80%;
width:80%;
margin: 0 auto;
position:absolute;
top:10%;
left:10%;
background:rgba(255, 255, 255, 1);
text-align:center;
color:black;
display:inline-block;
box-sizing:border-box;
opacity:0;
transition: 0.4s all;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
}
.centeredDiv:hover { opacity:1; }
.content{
top: 50%;
transform: translateY(-50%);
position:relative;
}
}
You can do that by using
div::after {
line-height: 20em;
....
}
I have text over a transparent background as shown here:
http://jsfiddle.net/L9ggc06c/
However, the text is still applying the transparency.
#content a:hover .text p{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity:1.0 !important;
color:#FFF;
font-family: 'ralewayregular';
font-size: 200%;
text-transform: uppercase;
overflow:hidden;
position: relative;
z-index: 50;
text-align:center;
height:100%;
width:100%;
margin-top: 20px;
}
#content a:hover .text {
display:block;
position:absolute;
top:50%;
left:0;
height:75px;
width:100%;
margin-top: -37px;
background-color: rgb(0,0,0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: 0.7;
}
I've given the <p> tag position:relative and a z-index: 10, which solved my last situation. However it didn't this time. Any help would be appreciated.
The child element has 100% of the 70% transparency its parent element has. This is expected behavior. You would need use absolute positioning on the paragraph and make it a sibling element to take it outside the influence of the parent.
Demo
#content .text {
position:absolute;
top: 50%;
left: 0;
right: 0;
...
opacity: 0;
transition: all .3s;
}
#content a:hover .text {
opacity: 1;
}
Use rgba( ) to output background opacity.
you can do something like this:
#content a:hover .text p{
color: #fff;
}
#content a:hover .text {
background-color: rgba(0,0,0, 0.2);
}
Opacity sets all the contents of the div to opacity set.
You can try something like this:
<div class="overlay">
<div class="blackBar"></div>
<a>Overlay text</a>
</div>
This is just a demo, you will have to apply this to your case!