So, I have gallery that contains some photos. I want to make when the image hovered then some information of the person is shows up, the name of person and the their role.
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
color: white;
width: 100%;
height: 0;
transition: .5s ease;
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> HIS JOB </div>
</div>
</div>
I used overlay to make the info shows up, but why the text is not in order and its not on the photo? I want its in the middle bottom on the photo. any suggestion? thanks before.
below is updated snippet
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
position:relative;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 5px;
left: 5px;
right: 0;
overflow: hidden;
color: white;
width: calc(100% - 10px) ;
height: 0;
transition: .5s ease;
display:block;
background:rgba(0,0,0,0.5);
}
.flag:hover .biodata{
height:calc(100% - 10px);
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> President of INASGOC </div>
</div>
</div>
See this fiddle
CSS
.biodata {
z-index:100;
}
.flag:hover .biodata {
height:100%
}
Use this Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">
<p style="padding:20px;">I am Mr. Alven</p>
</div>
</div>
</div>
</body>
</html>
Related
I want my image hovers to look like this,
but For some reason, my CSS styling is not working. You may notice the #content in each of the CSS styling options. That is because I only wanted these styles to apply to a certain section of my website. I looked online and used the W3Schools resource, yet for some reason, it still doesn’t work. My images do not have the hover effect.
#content.container {
position: relative;
width: 50%;
}
#content img {
width: 100%;
height: auto;
border-radius: 50%;
}
#content .column {
float: left;
width: 33.33%;
padding: 5px;
}
#content .row::after {
content: "";
clear: both;
display: table;
}
#content .overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
border-radius: 50%;
}
#content .img:hover .overlay {
bottom: 0;
height: 100%;
opacity: 0.5;
}
#content.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<div class="column">
<div class="team">
<div class="img">
<img src="/static/img/team/team-1.jpg" alt="" style="width: 200px;">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h3 class="team-prof">
Dr. Pawan Kumar Kesari
</h3>
</div>
</div>
</div>
It seems you haven't followed THIS guide very well.
You also have not identified what #content is.
You need to revise how you target IDs, Classes and Elements in CSS.
Here is your code remodified to follow the guide, plus I added in #content for you.
#content .img {
position: relative;
width: 50%;
}
#content img {
display: block;
width: 200px;
height: auto;
border-radius: 50%;
}
#content .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 200px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
}
#content .img:hover .overlay {
opacity: 1;
}
#content .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="content">
<div class="container">
<div class="column">
<div class="team">
<div class="img">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h3 class="team-prof">
Dr. Pawan Kumar Kesari
</h3>
</div>
</div>
</div>
</div>
There were flaws in your code. There was no shared container. There were no spaces in the css rules between the identifier and the classes. #content .overlay had a height: 0 - this makes the object invisible. My answer isn't perfect, but I've tidied up the code a bit.
.main {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.main_content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 1000px;
}
.main_content_box {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.main_content_box_image {
position: relative;
}
.main_content_box:hover > .main_content_box_image p {
display: flex;
}
.main_content_box:hover > .main_content_box_image img {
filter: brightness(25%);
}
.main_content_box:hover a {
color: #337ab7;
}
.main_content_box_image img {
width: 250px;
height: 250px;
border-radius: 125px; /* or 50%*/
transition: .5s;
}
.main_content_box_image p {
display: none;
position: absolute;
top: 40%;
left: 20%;
right: 0;
font-size: 14px;
color: #fff;
}
.main_content_box a {
color: #333;
font-size: 16px;
font-weight: bold;
text-decoration: none;
margin: 20px 0 0 0;
}
<div class="main">
<div class="main_content">
<div class="main_content_box">
<div class="main_content_box_image">
<img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt="">
<p>MBBS, General Physician</p>
</div>
Dr. Pawan Kumar Kesari
</div>
<div class="main_content_box">
<div class="main_content_box_image">
<img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt="">
<p>MBBS MD(Medicine) General Physician</p>
</div>
Dr. Nitin Kumar Srivastava
</div>
<div class="main_content_box">
<div class="main_content_box_image">
<img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt="">
<p>MBBS General Consultant and Diabetician</p>
</div>
Dr. (Mrs) Halima
</div>
</div>
</div>
<div align="center">
<div class="container2">
<img src="img/3.png" alt="discussion Threads" class="image" height="200px" width="150px">
<div class="overlay">
<div class="text">Here you can discuss different topics and ask or answer questions.</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay2">
<div class="text">Bottom</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay3">
<div class="text">Bottom</div>
</div>
</div>
</div>
i want to make the images next to each other but i can't idk why or how tbh and this is the css i have tried everything it doesn't work
I want 3 images side by side with hover and caption, at the moment I have 3 images going from top to bottom, the hover is good but not side by side. How do I make the images appear side by side? Thanks.
.container2 {
position: relative;
width: 250px;
}
.image {
display: block;
width: 250px;
height: 300px;
height: auto;
margin: 17%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay {
height: 85%;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay2 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay2 {
height: 85%;
}
.overlay3 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay3 {
height: 85%;
}
You would have to add float property to your container2 selector. Please check the css rule below.
.container2 {
float: left;
position: relative;
width: 250px;
}
.container {
width: 400px;
height: 400px;
padding: 0px;
display: grid;
grid-template-columns: auto auto auto;
}
.item {
width: 100px;
height: 200px;
margin: 2px;
}
<div class="container">
<div class="item" style="background-color:red">
</div>
<div class="item" style="background-color:blue">
</div>
<div class="item" style="background-color:yellow">
</div>
</div>
Why don't you grid-display property ?
This might help you
For these such scenarios there is a beautiful/clean/simple concept called flex which is helping by decreasing number of lines of code:
here is the example with column, color and hover effect, hope it helps you:
#MainDiv {
height: 200px;
width: 650px;
display: flex;
/* here is a concept */
flex-direction: row;
/* you can either change it to row/columns */
padding: 5px;
}
#firstDiv {
width: 200px;
margin: 5px;
background-color: red;
}
#secondDiv {
width: 200px;
margin: 5px;
background-color: blue;
}
#thirdDiv {
width: 200px;
margin: 5px;
background-color: green;
}
#firstDiv:hover {
background-color: blue;
color: white;
}
#secondDiv:hover {
background-color: green;
color: white;
}
#thirdDiv:hover {
background-color: red;
color: white;
}
<div id="MainDiv">
<div id="firstDiv">First Div</div>
<div id="secondDiv">Second Div</div>
<div id="thirdDiv">Third Div</div>
</div>
I was trying to participate in a CSS challenge when this occurred. Everything seems working as expected, however when clicking on the plus circle to display div#card the div.container loses it's top margin and I cannot understand why. Please if anyone can help me with this, I'd be really grateful - And maybe we can all learn from it ;)
Thanks!
Codepen: https://codepen.io/albertrf147/pen/LMKKeK
HTML
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
background: lightblue;
}
.container {
width: 400px;
height: 400px;
margin: 20px auto !important;
position: relative;
display: flex;
flex-wrap: wrap;
background: white;
padding: 2px;
}
.square {
box-sizing: border-box;
padding: 2px;
width: 50%;
height: 50%;
position: relative;
background: white;
}
.square>img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
margin: auto;
}
.onhover {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
transition: all .6s ease-in-out;
}
.onhover:hover {
background: rgba(0, 0, 0, 0.5);
}
.circle-aux {
position: relative;
width: 100%;
height: 100%;
transition: all .6s ease-in-out;
}
.circle-aux:hover .circle {
visibility: visible;
opacity: 1;
transform: scale(0.2);
transition: all .6s ease-in-out;
}
.circle {
visibility: hidden;
opacity: 0;
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
background: salmon;
}
.circle:before {
content: "";
background: white;
height: 50%;
width: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:after {
content: "";
background: white;
height: 6px;
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container-card {
visibility: hidden;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.container-card>img {
width: 100%;
height: 60%;
object-fit: cover;
}
.container-card:target {
visibility: visible;
}
.avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0px 0px 20px black;
width: 25%;
height: 25%;
background: white;
z-index: 2;
text-align: center;
font-family: calibri;
font-weight: bold;
color: white;
font-size: 18px;
}
.avatar>img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
padding: 4px;
}
.mini-circle {
display: inline-block;
width: 15%;
height: 15%;
border: 1px solid white;
border-radius: 50%;
margin-top: 12px;
}
.mini-circle:hover {
background: white;
cursor: pointer;
}
footer {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
background: salmon;
height: 50%;
width: 100%;
z-index: 1;
padding: 2px;
}
.close {
position: absolute;
border-radius: 50%;
width: 8%;
height: 8%;
background: black;
transform: rotate(45deg);
right: 10px;
top: 10px;
cursor: pointer;
}
.close:before {
content: "";
background: white;
height: 60%;
width: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close:after {
content: "";
background: white;
height: 2px;
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<main>
<div class="container">
<div class="square">
<div class="onhover">
<div class="circle-aux">
<a class="circle" href="#card"></a>
</div>
</div>
<img src="https://images.pexels.com/photos/305241/pexels-photo-305241.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1546711/pexels-photo-1546711.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1800433/pexels-photo-1800433.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div class="square">
<div class="onhover">
<div class="circle-aux">
<div class="circle"></div>
</div>
</div>
<img src="https://images.pexels.com/photos/1757111/pexels-photo-1757111.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
</div>
<div id="card" class="container-card">
<a class="close" href="#"></a>
<img src="https://images.pexels.com/photos/1769331/pexels-photo-1769331.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<div class="avatar">
<img src="https://images.pexels.com/photos/769772/pexels-photo-769772.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" />
<span>David Craig</span>
<span>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
<div class="mini-circle"></div>
</span>
</div>
<footer></footer>
</div>
</div>
</main>
Welcome to SO!
As the appearing container is position: absolute no margin takes effect.
You need to work with the top attribute to place it properly.
Check this out: https://codepen.io/anon/pen/pGzVyL
For more informations click here: https://www.w3schools.com/css/css_positioning.asp
In the following code, on hovering over the green button, the blue bar appears.
But when I write the words "About Me" on the about_button div (ie the green button), the shape of the button changes.
How can I successfully write "About Me" on the green button without spoiling the shape of the button?
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
add vertical-align:top to it, because inline-block by default has vertical-align:baseline
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align:top; /** THIS LINE */
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button">About Me</div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</body>
</html>
change position on #about_button from relative to absolute
You have the attribute display:inline-block on the button, this forces the shape wrap around the content inside it. Change it to display:block.
I want the text in the blue box to appear on its opening, but it should be fixed, not adjusting to the blue box width.
I also need some ideas as to what can be other interesting ways to display the text in a similar manner that I just did. (ie not visible initially but on hovering, text visible)
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
width: 400px;
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
you can just use transform with scale or translate:
scale:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-4px) scale(0,1);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(4px) scale(1,1);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
translate:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
You can make the text as sibling to the background. Check out the fiddle.
https://jsfiddle.net/gwbdrskg/
This is the HTML
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<div class="background"></div>
<p class='text'>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</div>
</body>
And the CSS
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
display: inline-block;
position: relative;
width: 400px;
}
#about_text .background {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about_text .text {
position: absolute;
top: 0;
}
#about {
top: 10%;
}
#about_button:hover + #about_text .background {
width: 400px;
}