I have used a wrapper class to put an image and some text together. I want the functionality that the text remains invisible but whenever I hover over the image, the text becomes visible and the image's opacity decreases and the text appearing on the image should have more opacity than the Image.
However, the code which I have written , decreases the opacity of Image on hovering and also makes the opacity of the text equal to that of Image. What should I do in order to ensure that the opacity of text and image remain different ?
/*Portfolio Section*/
html {
font-size:12px;
}
section{
display:flex;
justify-content:center;
flex-wrap:wrap;
height:auto;
width:90vw;
margin:auto;
}
#portfolio-header span{
color:blue;
font-size:3rem;
display:inline-block;
margin-top:1rem;
margin-bottom:2rem;
}
.portfolio-images{
display:flex;
width:100%;
flex-wrap:wrap;
justify-content: space-evenly;
}
.wrapper img{
width:25rem;
height:20rem;
display:inline-block;
}
.wrapper{
position:relative;
width:25rem;
height:20rem;
margin-bottom:0.8rem;
}
.img_description{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
color:white;
visibility:hidden;
opacity:0;
transition: opacity .2s,visibility .2s;
}
.wrapper:hover img{
background-color:lightgray;
opacity:0.4;
}
.wrapper:hover .img_description{
visibility:visible;
opacity:1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<script src="https://kit.fontawesome.com/15a25df2f9.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="portfolio">
<div id="portfolio-header">
<span><i class="fas fa-align-justify"></i></span>
<span>Portfolio</span>
</div>
<div class="portfolio-images">
<div class="wrapper">
<img src="Picture1.png" alt="picture">
<p class="img_description">Write Here Basic Details About The Picture.</p>
</div>
<div class="wrapper">
<img src="Picture1.png" alt="picture">
<p class="img_description">Write Here Basic Details About The Picture.</p>
</div>
<div class="wrapper">
<img src="Picture1.png" alt="picture">
<p class="img_description">Write Here Basic Details About The Picture.</p>
</div>
<div class="wrapper">
<img src="Picture2.png" alt="picture">
<p class="img_description">Write Here Basic Details About The Picture.</p>
</div>
<div class="wrapper">
<img src="Picture2.png" alt="picture">
<p class="img_description">Write Here Basic Details About The Picture.</p>
</div>
<div class="wrapper">
<img src="Picture2.png" alt="picture">
<p class="img_description">Write Here Basic Details About The Picture.</p>
</div>
</div>
</section>
</body>
</html>
Related
I have a section inside which there is an image of a fixed height and a div which has some text and a background color in it. I want to make the height of the div and the image same and the div with the background color to overlap the image so that only text and background color are seen and not the image but the height should be of the image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
The image has a bootstrap class of img-responsive so that on resize it shrinks and also the div along with it. How can I do this?
position properties will work same as you want. section will take img's height and by setting height:100%; and position:absolute to div, it will take same height as img
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section {
position: relative;
}
div {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
}
</style>
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
Please have a link of your solution
http://codepen.io/santoshkhalse/pen/pNWpYd
<section>
<img class="img-height" src = "https://openclipart.org/image/2400px/svg_to_png/28688/skotan-Thumbs-up-smiley.png" class = "img-responsive">
<div class="content-text">
<h2> Your text will render here </h2>
</div>
</section>
.img-height{
height:100px;
position:absolute;
}
.content-text{
width:100%;
height:100px;
background:green;
padding-left:120px;
}
img{ display:block; max-width:100%; height:auto;}
section{ position:relative}
.overlap-text{background:rgba(0,0,0, 0.5); color:#fff; position:absolute; left:0; top:0; height:100%; width:100%;}
<section>
<img src="https://s-media-cache-ak0.pinimg.com/originals/2a/94/e3/2a94e33f7afe6600fe9c97eda3a386b3.jpg" class="img-responsive"/>
<div class="overlap-text">
<h2>Lorem Ipsum dummy text</h2>
</div>
</section>
This question already has answers here:
Why is there a gap between my image and its containing box?
(6 answers)
Closed 7 years ago.
A simple question and probably a simple solution, but I can't seem to find it.
As you can see in the example there is a pixel gap between the bottom of the 2 images and the DIV (home-top or home-bottom).
How do I get rid of that?
.container{
width:80%;
}
.menu{
width:100%;
background:black;
color:white;
text-align:center;
}
.home-top{
background:white;
overflow:hidden;
}
.home-bottom{
background:#EEE;
overflow:hidden;
}
.footer{
width:100%;
background:black;
color:white;
}
.txt-left, .img-left{
width:50%;
float:left;
}
.txt-right, .img-right{
width:50%;
float:left;
}
<div class="menu">
menu
</div>
<div class="home-top">
<div class="container">
<h1>home top</h1>
<div class="txt-left">
some text goes here.
</div>
<div class="img-right">
<img src="http://www.webtify.be/elkegeraerts/img/elke_geraerts.png" alt="" width="200" />
</div>
<div class="clear"></div>
</div>
</div>
<div class="home-bottom">
<div class="container">
<h1>home bottom</h1>
<div class="img-left">
<img src="http://www.webtify.be/elkegeraerts/img/boek.png" alt="" width="200" />
</div>
<div class="text-right">
some text goes here.
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
footer
</div>
Set "display:block;" on the images.
img{
display:block;
}
https://jsfiddle.net/
What I am trying to do is when you hover mouse over div1 it will effect links div
When hovering div1:
div .div1:hover ~ linksdiv:after {
display:inline-block;
transition-duration: all 1s;
color:#FFF;
padding-left:50px;
content:"index";
linksdiv without hover:
display:inline-block;
position:relative;
transition-duration:1s;
transition-property:margin;
transition-delay:2s;
float:left;
margin-left:100px;
width:500px;
height:100px;
font-size:100px;
font-weight:900;
top:-230px;
content: string;
The purpose of this code is to have the text go white on a red background while giving a moving effect.
But all it does is display a white text.
This worked when I did not use "content" but instead had a finished written text in the div. :(
edit:
html
<div id="surrounding">
<div id="left">
<div class="div1">
index
</div>
<div class="div2">
media
</div>
<div class="linksdiv">
</div>
</div>
<div id="header">
</div>
<iframe id="content" src="">
</iframe>
</div>
I build a display that reveals information in the requested "flat tile" look my boss asked for using just CSS. So he has changed his mind and wants the text to slide out and the picture to say where it is. Here's where I'm at now.
I thought I might float the description div and make it relative to the bottom of the container div. That way when the container expands, the text would travel down. Didn't work.
CSS
/*HOW THE ROSTER LOOKS BEFORE THE HOVER*/
div.dude{ /*DUDE is the container for both the description and the photo divs*/
background-color:#82b2cd;
float:left;
margin-left:50px;
margin-bottom:20px;
width:200px;
height:200px;
overflow:hidden;
transition: all 0.3s ease-in-out;
}
div.dude>:first-child{ /*DESCRIPTION*/
font-size:14px;
opacity:0;
text-align:center;
height:200px;
color:#ffffff;
transition: opacity 1s linear;
}
div.dude>:first-child>h5{
color:#ffffff;
font-family: 'Roboto', sans-serif;
font-size:16px;
}
div.dude > div:nth-of-type(2){ /*Roster photo 200x200*/
position:relative;
top:-200px; /*cover up the description*/
float:left;
clear:none;
height:200px;
width:100%;
background-size:cover;
}
/*HOW A ROSTER ITEM LOOKS WHEN THE MOUSE HOVERS or FOCUS:*/
div.dude:hover, div.dude:focus{
height:400px;
box-shadow: 2px 2px 1px #888888;
}
div.dude:hover > :first-child, div.dude:focus > :first-child {
opacity: 1;
transition: opacity 1s linear;
}
div.dude:hover > div:nth-of-type(2), div.dude:focus > div:nth-of-type(2){
animation:duder 1s;
-moz-animation:duder 1s; /* Firefox */
-webkit-animation:duder 1s; /* Safari and Chrome */
top:0px;
}
#keyframes duder
{
0% {top:-150px;}
25% {top:-0px;}
50% {top:-0px;}
75% {top:-0px;}
100% {top:0px;}
}
#-moz-keyframes duder /* Firefox */
{
0% {top:-150px;}
25% {top:-0px;}
50% {top:-0px;}
75% {top:-0px;}
100% {top:0px;}
}
#-webkit-keyframes duder /* Safari and Chrome */
{
0% {top:-150px;}
25% {top:-0px;}
50% {top:-0px;}
75% {top:-0px;}
100% {top:0px;}
}
HTML
<div class="bs-docs-grid">
<div class="row">
<div class="dude span4">
<div><h5>Scott Sheridan</h5></br><i>English as a Second Language</i></br>Marianapolis Preparatory School</br>Thompson, CT</div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Mike Fauteux</h5></br><i>Academic Numeracy and Geometry</br>Master Teacher</i></br></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/08/fauteux-300x300.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Rose Zapata</h5></br><i>Algebra 1 and Geometry</br>Master Teacher</i></div>
<div style="background-image:url('http://leadps.org/images/content/633/Zapata.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Rudy Sharar</h5></br><i>High School Science</i></div>
<div style="background-image:url('http://www.leadps.org/images/content/1263/Rudy%20Sharar.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Joe Williams</h5></br><i>School Administration</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/joe_williams.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Martha James</h5></br><i>High School</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/martha_james.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Mitchell Mosbey</h5></br><i>First Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/mmosbey.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Robert Rigonan</h5></br><i>Middle School Science</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/397136_4343580901101_1361576410_n-650x650.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Manny Herrera</h5></br><i>Fourth Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/mannyhanging.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Sophia Thomas</h5></br><i>High School Mathematics</i></div>
<div style="background-image:url('http://www.leadps.org/images/content/1263/Sophia%20Thomas.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Mary Ellen Davies</h5></br><i>Middle School German</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/Schoenes-Wochenende-Ticket.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Dan Alderson</h5></br><i>10th Grade English</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/dalderson-650x650.png');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Heather Meiring</h5></br><i>High School Science</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/heather_meiring.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Ruthe Hall</h5></br><i>Middle School</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/ruthe_hall.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Evan Wolkenstein</h5></br><i>Jewish Literature, Psychology, Human Relations</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/evan_wolk.png');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Sarah Gerhardt</h5></br><i>Second Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/Sarah_g-650x644.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Becca Abeles</h5></br><i>10th & 11th Grade English</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/b_abeles.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Tess O'Brien</h5></br><i>Fourth Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/P1010156_2.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Jean Gephart</h5></br><i>High School Science</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/JeanGephart.jpg');"></div>
</div>
</div>
</div>
<!-- ROSTER ENDS -->
In order to make the description text slide over the picture (without pushing the picture down), you can put the description in an absolutely positioned div, position it with top:-200px above the parent element, and the set top:0 when the parent is hovered or focused. I provide a working example here: http://jsfiddle.net/YXuk9/113/.
While you're at it, there are several changes you can make to your code that will make doing what you want easier. First, it's better to structure your HTML using IDs and classes if you can, rather than referring to them using nth-child selectors. It will be easier to read and maintain.
<div class="profile">
<img class="photo" src="http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg" alt="Scott Sheridan" />
<div class="description">
<h5>Scott Sheridan</h5>
<span class="subject">English as a Second Language</span>
<span class="school">Marianapolis Preparatory School</span>
<span class="location">Thompson, CT</span>
</div>
</div>
Notice how this way of structuring the HTML makes it clear what kind information each tag holds. This way, when you refer to a given tag in your CSS, it's clear what you're talking about, so you don't need a comment saying that the first child of the div is the description!
Then your CSS can be much simpler:
.profile {
position:relative;
width:200px;
height:200px;
display:block;
overflow:hidden;
float:left;
margin-left:50px;
margin-bottom:20px;
}
.photo {
width:100%;
}
.description {
background-color:#82b2cd;
position:absolute;
top:-200px;
left:0;
color:white;
padding:10%;
height:100%;
transition: all 0.3s ease-in-out;
}
.description span {
display:block;
}
.profile:hover .description, .profile:focus .description {
top:0;
}
Note that now it's clear what element each CSS rule refers to. To make it clear I've removed some of the styles that aren't relevant to the problem you're having.
I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?
<style>
div.product{
width:90%;
margin:10px auto;
height: 200px;
transition: all 0.1s ease;
background-color: #069;
}
div.product:hover{
margin-top:-5px;
}
.img_box{
width:50%;
height:100%;
padding: 10px;
float:left;
box-sizing: border-box;
}
.desc_box{
width:50%;
height:100%;
float:left;
padding: 10px;
box-sizing: border-box;
}
.img{
background-color: #b65050;
height: 100%;
}
.desc{
background-color: chocolate;
height: 100%;
}
</style>
HTML:
<div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
</div>
heres my fiddle: MY FIDDLE
This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.
What you need is this:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative basically takes up the original space but lets the div to be rendered elsewhere.