I have two images with round corners that act as buttons. When the mouse pointer hovers over those images, the image dims and a text appears. The problem is that the text line has an effective area larger than the image display size. I want to make the text to be effective just in image boundaries. How can I fix this issue?
I have used this HTML/CSS code:
<!DOCTYPE html>
<html lang="fa">
<head>
<title>]Information System</title>
<style>
#main-image{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: auto;
}
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:floralwhite;
user-select: none;
}
.sub-image{
border-radius: 5%;
}
.container{
float: left;
width: 20%;
padding: 5%;
}
.image-text{
opacity: 0;
transition: 0.5s;
}
.sub-image:hover {
opacity: 0.3;
transition: 0.5s;
}
.sub:hover .image-text{
opacity: 1;
transition: 0.5s;
}
.row::after{
clear: both;
}
.container{
position: relative;
text-align: center;
}
.container .image-text{
position: absolute;
left: 0;
right: 0;
top: 60%;
text-align: center;
color: cornsilk;
}
</style>
</head>
<body bgcolor="black">
<div>
<img id="main-image" src="Images/IT.jpg" width="1600" alt="Intro">
</div>
<hr>
<div class="row">
<div class="container">
<a href="https:www.google.com">
<div class="sub">
<img class="sub-image" src="Images/repair.jpg" width="300">
<div class="image-text">
<h1>Failures</h1>
</div>
</div>
</a>
</div>
<div class="container">
<a href="https:www.google.com">
<div class="sub">
<img class="sub-image" src="Images/Equipment.jpg" width="300">
<div class="image-text">
<h1>Equipments</h1>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
You can add the below css. This will ensure the h1 is positined relative to the sub class and any overflow will be hidden. You can remove the text-overflow ellipsis if you don't want to show that there is more text
.sub{
position: relative;
}
.image-text h1{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
To blur background even on text hover use parent selector of .sub instead of .sub-image like below
.sub:hover .sub-image {
opacity: 0.3;
transition: 0.5s;
}
Related
So I spent a couple hours searching, but all I've seeing is just standard help with adding text over an image, nothing that will put the text over the image, as it "falls" off the image.
I've attached an example of what I'm referring to.
I'm trying to do it in a way so the images stay right under each other and not create space between the, added another photo for reference on what I mean.
I've tried creating an img-container and add text but that doesn't allow me to have the text "fall" off the image. This is what I have so far (not including the text".
I've attempted to make the images as the body background but that didn't have the same design I'm looking for unfortunately, as the text will also serve as links in the future.
images stacked with no space
text falling off the image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<div class="img-container">
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
</div>
<code>Designed by #PasettaStudios. </code>
</div>
</body>
</html>
And here is my CSS
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 100%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
/* links and text inside nav bar */
.navbar a {
float: left;
padding: 40px 0px 0px 0px;
background-color: #262c2c;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
p {
text-align: right;
font-size: 100px;
padding-left: 100px;
color: #dae1e7;
font-family: Modric;
font-size: 150px;
}
Try this:
<div class="img-container">
<div class="row">
<img src="images/top-image.jpg" alt="plants">
<span>Your text</span>
</div>
<div class="row">
<img src="images/second-image.jpg" alt="benches">
<span>Your text</span>
</div>
<div class="row">
<img src="images/third-image.jpg" alt="cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/last-image.jpg" alt="more cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/pasetta-studios" alt="pasetta studios">
<span>Your text</span>
</div>
</div>
.img-container {
width: 500px;
height: auto;
}
.row{
position: relative;
width: 100%;
}
.row span {
position: absolute;
color: white;
top: 0;
}
.row:nth-child(odd) span {
left: -20px;
}
.row:nth-child(even) span {
right: -20px;
}
What you have to do is put your Image in a Container, along with your text. The text is then positioned absolute and with a negative margin or left and right values instead of only setting top values.
<div class="img-container">
<img src="img1.jpg" alt="Image 1">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
<div class="img-container">
<img src="img2.jpg" alt="Image 2">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
For multiple images, just repeat this code.
And your CSS:
.img-container {
position:relative;
margin:0;
padding:0 40px;
}
.img-container img {
border:0;
}
.img-container p.lefttext {
position:absolute;
top:50px;
margin-left:-40px;
}
.img-container p.righttext {
position:absolute;
top:120px;
width:100%;
text-align:right;
margin-right:—40px;
}
Alternatively, you could do
.img-container p.lefttext {
position:absolute;
top:20px;
left:0;
}
.img-container p.righttext {
position:absolute;
top:120px;
text-align:right;
right:0;
}
If the position of the text over the image should change for each picture, simply remove the ˋtop:..pxˋ from your CSS and add ˋstyle="top:50px;"ˋ to each image tag.
I've made a sidebar in html but there is a problem when I've added some images and attempted to change the margins. This also applies the margin to the sidebar. I've tried changing the position from fixed to relative, absolute, etc. but this does not help. The sidebar should maintain its original 100% height, but the images' margin-top of 400px also applies to the sidebar, which is 400px down from where it should be. Thanks in advance
.sidebar{
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background-color: #313B4A;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
transition: 0.7s ease;
}
.sidebar header{
font-size: 22px;
color: #4F6D7A;
text-align: center;
font-weight: 800px;
line-height: 75px;
background: #DBE9EE;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
color: #dceedc;
font-size: 20px;
padding-left: 10px;
transition: 0.5s;
}
label #btn, label #close{
position: absolute;
}
#tickbox:checked ~ .sidebar{
left:0;
}
#tickbox:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#tickbox:checked ~ label #close{
left:195px;
}
html {
font-family: 'Karla', sans-serif;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.gallery {
margin-top: 200px;
padding: 20px;
display: flex;
flex-direction: row;
}
.gallery figure {
margin: auto;
width: 250px;
text-align: center;
}
.gallery img{
height: 200px;
width: 275px;
}
Oops, forgot to add the HTML!
<body>
<input type="checkbox" id="tickbox">
<label for="tickbox">
<i class="fas fa-bars"id ="btn"></i>
<i class="fas fa-times"id ="close"></i>
</label>
<div class="sidebar">
<header>KeyQuarters</header>
<ul>
<li>Home</li>
<li>Group Buys</li>
<li>Keycaps</li>
<li>Switches</li>
<li>Deskmats</li>
<li>Kits</li>
<li>Accessories</li>
</ul>
</div>
<div class="gallery">
<figure>
<img src="test1.png" alt="keeb1">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
<figure>
<img src="test2.jpg" alt="keeb2">
</figure>
</div>
</body>
I am currently working on an image gallery where I have different sections that have multiple images. I am currently trying to set up each section of images to be a single row and scoll horizontally similar to what netflix does. Right now I've been unable to get the container to overflow in the x to work and instead goes to a second row.
I've tried using
white-space: nowrap
overflow-x: auto;
overflow-y:hidden;
display: inline-block;
I've also tried taking a containing div for the list and rotating it 90 deg and allow vertical scrolling and then rotating a child div back.
The best I've been able to get for the effect I'm trying to acheive is the second example but I've been unable to get the width correct on the containing wrapper. I'm trying to get the row all the way across.
First example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
}
ul > .gallery {
float: left;
white-space: nowrap;
overflow-x: auto;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Second Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
transform: rotate(-90deg);
/* transform-origin: right top; */
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
transform: rotate(90deg);
/* transform-origin: right top; */
}
ul > .gallery {
width: 100%;
height: 100%;
float: left;
display: inline;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<!-- <div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div> -->
</div>
</div>
</body>
</html>
In the second exampe I'm getting the scolling I'm looking to get but not the width. Any help would be much appreciated.
You can add a fixed width to your .section wrapper instead of 100%
example: 1000px
Both display:inline-block and float:left will detect if there are spaces beside them so you should set a fixed width container.
I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>
It seems like no matter what I do I just can't get some text with a black background to centre vertically. The problem is that sometimes the text is on one line and sometimes it is on two or even three. I'm trying to get it to automatically adjust but I just can't.
I have tried numerous approaches such as those listed on here.
Here is my code I am trying to centre:
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile1.png" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile2.png" width="96%">
<h3 class="tilewrappertext">1/4 off massages</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile3.png" width="96%">
<h3 class="tilewrappertext">20/3 off hot rocks</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile4.png" width="96%">
<h3 class="tilewrappertext">20/3 off nails</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile5.png" width="96%">
<h3 class="tilewrappertext">Free use of sauna with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile6.png" width="96%">
<h3 class="tilewrappertext">Free use of jacuzzi with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile7.png" width="96%">
<h3 class="tilewrappertext">1/20 off eyes</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile8.png" width="96%">
<h3 class="tilewrappertext">1/20 off hair</h3>
</div>
</li>
</ul>
</div>
The text appears when the image is hovered over.
Since your li is already position relative, you can add the following css rules to the h3 to center it vertically within the li.:
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
Example here: http://codepen.io/nicerhugs/details/dMGMEv/
The top will move the top of the h3 halfway down the li, and the transform will correct for the height of the li itself. Getting rid of the margin will take away that weird mystery space that makes it appear to be lower than it really is.
Just go with the Jess's answer. Here is another method to do this using pseudo element aka ghost element in css.
You have to give absolute position to image. add a :after element to div#tilewrapper and make it display inline-block, also make the h3 tag inline-block and apply vertical-align: middle, it will position vertically middle. Little complicate to understand but anyway Here is the code . :)
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
.infogrid{
margin-top: 50px;
}
img {
max-height: 320px;
position: absolute;
}
div#tilewrapper{
height: 100%;
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
vertical-align: middle;
display: inline-block;
vertical-align: middle;
width: calc(100% - 4px);
}
div#tilewrapper:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -5px;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="http://1.bp.blogspot.com/-fqGa-MyjVHY/UZPYekbmfHI/AAAAAAAABrg/CC4q0AQsY9o/s320/air-baloon.jpg" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
</ul>
</div>