Hello all I am trying to make a full-width bar of images, and when one image is hovered, I want text about that image to appear below the bar. So far I have the following html and css:
<div class="everything-container">
<div class="pic-container">
<img class="pic one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">
</div>
<div class="info-container">
<div class="name">
<p class="glenn name">Glenn</p>
</div>
<div class="title">
<p class="glenn title">Part Owner/ Senior Inspector</p>
</div>
<div class="bio">
<p class="glenn bio">My name is Glenn and I am amazing.</p>
</div>
</div>
</div>
.everything-container {
height: 500px;
width: 100%;
border: 2px solid black;
}
.pic-container {
width: 100%;
height: 100px;
border: 2px solid green;
}
.info-container {
width: 100%;
height: 400px;
border: 2px solid red;
}
.name {
height: 400px;
width: 25%;
border: 2px solid yellow;
float: left;
text-align: center;
font-size: 120%;
font-family: "Open Sans";
font-weight: bold;
color: black;
}
.title {
height: 400px;
width: 20%;
border: 2px solid blue;
float: left;
text-align: center;
font-size: 90%;
text-decoration: italic;
color: grey;
font-family: "Open Sans";
}
.bio {
height: 400px;
width: 55%;
border: 2px solid orange;
float: left;
font-size: 100%;
text-align: center;
color: black;
font-family: "Open Sans";
}
.pic {
height: 100px;
width: 100px;
float: left;
}
I gave one of my images the class of "one" and when i hover it i want anything with a class of "glenn" to appear. Using .one:hover .glenn { stuff } did not work. Is this possible to do? Thank you!
I'm afraid this is the closest you can get without javascript:
<div class="everything one">
<div class="image">
<img src="..." />
</div>
<div class="info">
Name
Title
Details
</div>
</div>
CSS:
.everything .info {
opacity: 0;
}
.everything:hover .info {
opacity: 1;
}
In order to make ".one:hover .glenn" work you need that everything with class 'glenn' to be inside of element with class 'one'.
If you are not able to achieve this you probably have to go with javascript.
.info-container {
display: none;
}
.pic-container:hover + .info-container {
display: block;
}
This is the easiest way:
Because you don't need JavaScript
Because it works with your HTML, no configuration needed.
Related
Div element not displaying in line with other 2 div elements present despite having the necessary space for it.
I am attempting to display a web page with 3 separate paragraphs divided into div elements, but the one on the right is seemingly stuck to the bottom of the page unless I remove the center div.
Here is the html:
<div class="Reviews">
<img src="review.jpg" alt="Needledrop Review" class="Review"> Sample Text Sample
</div>
<div class="Sales">
<img src="redcarpet.jpg" alt="JID on the Red Carpet" class="RedCarpet"> Sample Text </div>
<div class="Impact">
<img src="dreamville.jpg" alt="JID with Dreamville members" class="Dream"> Sample
</div>
Here is the CSS for each div element:
div.Reviews {
float: left;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.Review {
vertical-align: text-top;
width: 100%;
}
Number 2:
div.Sales {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.RedCarpet {
vertical-align: text-bottom;
width: 100%;
}
Number 3:
div.Impact {
float: right;
font-size: 1.207em;
border: 1px solid black;
padding: 10px;
width: 255px;
height: 737px;
text-align: justify;
color: white
}
img.Dream {
vertical-align: text-top;
width: 100%;
}
Any help would be appreciated, thank you!
.container {
display: flex;
}
div.Reviews {
float: left;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.Review {
vertical-align: text-top;
width: 100%;
}
div.Sales {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.RedCarpet {
vertical-align: text-bottom;
width: 100%;
}
div.Impact {
float: right;
font-size: 1.207em;
border: 1px solid black;
padding: 10px;
width: 255px;
height: 737px;
text-align: justify;
color: white
}
img.Dream {
vertical-align: text-top;
width: 100%;
}
<div class="container">
<div class="Reviews">
<img src="https://www.typinks.com/images/character-sketch-of-friar-laurence-in-romeo-and-juliet.webp" alt="Needledrop Review" class="Review"> Sample Text Sample
</div>
<div class="Sales">
<img src="https://www.typinks.com/images/role-of-fate-in-romeo-and-juliet.webp" alt="JID on the Red Carpet" class="RedCarpet"> Sample Text </div>
<div class="Impact">
<img src="https://www.typinks.com/images/along-with-the-raptors.webp" alt="JID with Dreamville members" class="Dream"> Sample
</div>
</div>
add a parent div with display:flex to align in horizontal
I am trying to create a website where I have divs side by side in a list (separated by a vertical line). I am referencing this design
I am having trouble making the design responsive: I tried using % but when resizing the browser, the divs containing my text content move down and awkwardly collide/crash into each other (and don't stay separated by the vertical line). I am wondering if anyone knows how to keep the divs separated and responsive when resizing
#experience {
border: 1px solid red;
padding-top: 0px;
margin-top: 0px;
min-height: 1000px;
}
.center_text {
border: 1px solid black;
padding-top: 1%;
text-align: center;
color: #001418;
font-weight: 600;
font-family: 'Josefin Sans', sans-serif;
font-size: 2em;
}
.vline {
height: 740px;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
.circle2 {
border: 50px solid black;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
#exp1 {
border: 1px solid blue;
font-family: 'Josefin Sans', sans-serif;
color: #182153;
margin-top: -43%;
height: 150px;
}
.circle:before {
content: ' \25CF';
font-size: 20px;
margin-left: 49.69%;
}
.exp_text {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin: 0 auto;
border: 1px solid red;
margin-top: -2%;
min-height: 110px;
}
.left_exp {
border: 1px solid green;
text-align: right;
margin-left: 25%;
}
.right_exp {
margin-top: -5.8%;
border: 1px solid green;
width: min-content;
margin-left: 60%;
}
.date {
font-size: 1.3em;
font-weight: 600;
}
.company {
font-size: 1.3em;
font-weight: 600;
}
.role {
font-size: 1em;
min-width: 250px;
}
.job_descr {
font-size: 1em;
min-width: 250px;
}
<div id="experience">
<h3 class="center_text"> Experience</h3>
<div>
<hr class="vline" />
<div id="exp1">
<span class="circle"></span>
<div class="exp_text">
<div class="left_exp">
<div class="date">
<p>2022 </p>
</div>
<div class="role">
<p>Software Engineering Intern</p>
</div>
</div>
<div class="right_exp">
<div class="company">
<p>Company Name</p>
</div>
<div class="job_descr">
<p>Description.................</p>
</div>
</div>
</div>
</div>
</div>
</div>
The solution was to use flexbox.
#experience_content {
margin: 0 auto;
min-height: 100vh;
width: min-content;
}
.row {
display: flex;
}
.column {
color: black;
flex:33.3%;
padding: 20px;
}
and
<div id="experience">
<div id="experience_content">
<div class="row">
<div class="column">
</div>
</div>
</div>
</div>
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I have a small section in the mobile version of my website with 50-50 image/text format which looks and functions as I want, but when I resize the browser a small gap appears at the bottom of the images.
I have tried everything but cannot figure out the issue (I am sure it is something minor I am staring right at). Closest I came was vertical-align: bottom; to the image but the gap just started appearing at the top instead.
.mobilecontainer1 {
display: block;
width: 100%;
float: left;
box-sizing: border-box;
}
.mobilebox {
float: left;
width: 50%;
overflow: hidden;
line-height: 0;
}
.mobilebox img {
width: 100%;
}
.mobiletextwrap {
padding-top: 19%;
}
#mobilebox1 {
background: black;
color: white;
}
#mobilebox2 {
background-color: white;
color: black;
}
#mobilebox3 {
background-color: black;
color: white;
}
.mobileboxwrap {
width: 100%;
float: left;
display: block;
}
#mobileboxwrap1 {
background: black;
color: white;
height: 100%;
overflow: hidden;
}
#mobileboxwrap2 {
background: white;
color: black;
height: 100%;
overflow: hidden;
}
#mobileboxwrap3 {
background: black;
color: white;
height: 100%;
overflow: hidden;
}
<div class="mobileboxwrap" id="mobileboxwrap1">
<div class="mobilebox">
<img src="img/mobilebackground_3.png">
</div>
<div class="mobilebox" id="mobilebox1">
<div class="mobiletextwrap">
<header>
<h2>Info</h2>
</header>
</div>
</div>
</div>
<div class="mobileboxwrap" id="mobileboxwrap2">
<div class="mobilebox" id="mobilebox2">
<div class="mobiletextwrap">
<header>
<h2>Drinks</h2>
</header>
</div>
</div>
<div class="mobilebox">
<img src="img/mobilebackground_2.png">
</div>
</div>
<div class="mobileboxwrap" id="mobileboxwrap3">
<div class="mobilebox">
<img src="img/mobilebackground_1.png">
</div>
<div class="mobilebox" id="mobilebox3">
<div class="mobiletextwrap">
<header>
<h2>Music</h2>
</header>
</div>
</div>
Just set the display: block for the img
.mobilebox img { width: 100%; display: block;}
I've trouble finding a good solution fo a relativly simple responsive layout problem.
It's a product item component which should look like in this example.
It brings some sort of equal-height-requirement with it (on desktop img to other content and on mobile img to product-info).
As stand alone it woudnt be a problem but i struggle with finding a good practice for two different viewports without duplicate content/markup.
Main Problem is the wrapping/flow-behaviour. Usually i would place a wrapper arround info and detail, but because of the mobile version this isn't possible.
Can maybe give me someone a good hint how to solve my problem?
Would be much appreciated
Thx and greetings, eldaDev
.product-item {
display: flex;
flex-wrap: wrap;
border: 1px solid #333;
}
.product-item__image {
width: 25%;
background-color: #ccc;
}
.product-item__info {
width: 75%;
background-color: green;
}
.product-item__detail {
width: 100%;
background-color: blue;
}
<!-- Markup example mobile version alike -->
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>
.product-item {
}
.product-item__image img{width:100%}
.product-item__image {
float: left;
width: 20%;
height: 400px;
background: #ffd9d9;
}
.product-item__info {
float: left;
width: 80%;
background: #f1f1f1;
text-align: center;
padding: 80px 0;
}
.product-item__detail {
float: left;
width: 80%;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
}
#media (max-width: 767px) {
.product-item__image {
float: left;
width:20%;
}
.product-item__info {
float: right;
width: 70%;
background: #f1f1f1;
text-align: center;
padding: 120px 0;
}
.product-item__detail {
float: none;
width: 100% !important;
background: #bfbfbf;
text-align: center;
padding: 80px 0;
clear: both;
}
}
<div class="product-item">
<div class="product-item__image">img</div>
<div class="product-item__info">info content</div>
<div class="product-item__detail">detail content</div>
</div>
Try this: It is working for me. float and #media() used to make it responsive. If not work, then let me know. Its my pleasure to help others :)
*{
font-family: arial;
color: #aaa;
font-weight: normal;
}
.wrapper{
border: solid 1px #363636;
width: 500px;
height: 200px;
padding: 10px;
}
.image{
float: left;
height: 100px;
width: 20%;
border: solid 1px #363636;
}
.images > img{
height: 90%;
}
.product_info{
float: left;
margin-left: 2%;
border: solid 1px #363636;
width: 77%;
height: 100px;
text-align: center;
}
.product_detail{
float: left;
margin-top: 2%;
border: solid 1px #363636;
width: 99%;
text-align: center;
height: 85px;
}
#media(max-width: 767px;){
.image{
float: left;
height: 200px;
width: 20%;
border: solid 1px #363636;
}
.product_detail{
float: right;
margin-top: 2%;
margin-left: 22%;
border: solid 1px #363636;
width: 77%;
text-align: center;
height: 85px;
}
}
<center>Desktop</center>
<div class="wrapper">
<div class="image">
<img src="https://i.stack.imgur.com/D8dBds.png" alt="IMG">
</div>
<div class="product_info">
<h1>Product Info</h1>
</div>
<div class="product_detail">
<h1>Product Detail</h1>
</div>
</div>