I have a simple webpage I'm working on, and I wanted to add a search bar to the page. However, when I added the search bar, it wouldn't let me click/type in the bar. I eventually found out that I was able to click/type into it after removing this div:
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
This is used to put a logo on the header of my page, and I haven't been able to figure out why this breaks the search input. Obviously I want to keep this logo on my header, but any help would be appreciated.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
#background: url("src/header.png") no-repeat;
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
input[type="text"] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type="text"]:focus {
width: 100%;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: left;
}
input[type="text"]::-ms-input-placeholder {
/* Microsoft Edge */
text-align: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
<h1>  Student Information</h1>
<br />
<form>
<input type="text" name="search" placeholder="Search" />
</form>
</body>
</html>
and here is my styles.css:
h1 {
font-family: "Roboto", "Arial";
}
.header {
overflow: hidden;
background-color: #522e81;
position: relative;
z-index: 1;
height: 77px;
}
.imagediv {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
max-width: 10%;
max-height: 10%;
}
input[type="text"] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets focus, change its width to 100% */
input[type="text"]:focus {
width: 30%;
}
Your imageDiv should be placed inside header div. That's the reason it's overlapping with input box and you are not able to type. Hope it helps man!
Related
I would like to get a hover effect on my image, when the user goes over the image a background should appear on the image with some text (see example below). My css doesn't look like it at all unfortunately. It is not in the middle and the image is not round but more like an egg.
My question now is, how can I use CSS to make the image so that it is round and when going over it the text is displayed nicely in the middle.
I also use Bootstrap as an additional library, if it should be easier.
What I have:
What I want:
Pic.js
<div class="container-profilepic">
<img src="./image.png" width="150" height="150" alt="Profibild" className="photo-preview"></img>
<div class="middle-profilepic">
<div class="text-profilepic"><i class="fas fa-camera"></i>
<div class="text-profilepic">Change it
</div>
</div>
Photo.css
.photo-preview{
width: 100% !important;
max-width: 125px !important;
height: 100% !important;
max-height: 125px!important;
border-radius: 50% !important;
}
.middle-profilepic {
transition: .5s ease;
opacity: 0;
position: absolute;
text-align: center;
}
.container-profilepic:hover .photo-preview {
opacity: 0.3;
}
.container-profilepic:hover .middle-profilepic {
opacity: 1;
}
.text-profilepic {
color: green;
font-size: 16px;
}
I checked this question befor out How do I add animated text on these images when I hover my cursor without changing current style?
Unfortunately it didn't help me.
I tried it before with top, left, postion...
.middle-profilepic {
transition: .5s ease;
opacity: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The result
So I removed it, because the result was much closer at what I want
Solution
You need to set the parent div with position: relative and the inner content (icon + image) as position: absolute elements, stretching to fit.
If you need the avatar image to ba an img tag you can use object-fit: cover in CSS (It has wide support nowadays: https://caniuse.com/?search=object-fit).
Tips
be careful the HTML you posted is invalid, has some broken tags
I vividly suggest you move away from using heavily !important within your CSS
Working example
body {
font-family: sans-serif;
}
.profilepic {
position: relative;
width: 125px;
height: 125px;
border-radius: 50%;
overflow: hidden;
background-color: #111;
}
.profilepic:hover .profilepic__content {
opacity: 1;
}
.profilepic:hover .profilepic__image {
opacity: .5;
}
.profilepic__image {
object-fit: cover;
opacity: 1;
transition: opacity .2s ease-in-out;
}
.profilepic__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.profilepic__icon {
color: white;
padding-bottom: 8px;
}
.fas {
font-size: 20px;
}
.profilepic__text {
text-transform: uppercase;
font-size: 12px;
width: 50%;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />
<div class="profilepic">
<img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" />
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text">Edit Profile</span>
</div>
</div>
Solution
Create a container with relative position and fixed height and width
Add an image as a background image respective to the container size
Add content with position: absolute
solution using bootstrap-5
.container-profilepic {
width: 150px;
height: 150px;
}
.photo-preview {
background-image: url( https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 );
background-size: cover;
background-position: center;
}
.middle-profilepic {
background-color: rgba( 255,255,255, 0.69 );
}
.container-profilepic:hover .middle-profilepic {
display: flex!important;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
</head>
<body>
<div class="container-profilepic card rounded-circle overflow-hidden">
<div class="photo-preview card-img w-100 h-100"></div>
<div class="middle-profilepic text-center card-img-overlay d-none flex-column justify-content-center">
<div class="text-profilepic text-success">
<i class="fas fa-camera"></i>
<div class="text-profilepic">Change it</div>
</div>
</div>
</div>
</body>
</html>
.image {
position: relative:
}
.text-div {
position: abolute;
top: 10px;
left:40%;
}
Also img tag it's self-closing tag
I am in quite a pickle...
So here is my situation, I want to make a moving animation when the mouse hovers over it.
When this happens, I would like text that is layered over this div to remain in the same position.
In my setup, I have a parent div that controls the yellow div inside it when the mouse hovers over it. Also inside the parent div is the text that I would like to position over the edge of the yellow div and remain static during the animation.
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
css:
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
width: 100%
}
.yellow {
display: inline-block;
left: 20%;
height: 7%;
position: relative;
transition: transform 0.4s ease;
transform-origin: right;
transform: scaleX(0px);
width: 80%;
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
This is what it is making
No matter what I do I simply cannot find a way to put the text over the moving divider without it:
Not staying on the same x plane as the moving div
Being transformed with the moving div
Wish this is what you looking for. If you didn't want the text to move you should add position absolute to your yellow div and also relative position to your parent div. then you can position the yellow div as you want. Also, you should put the width: 80%; before your scaleX(0) so that transform can work and also you should give the scaleX transform, 0 as a value, not 0px.
Run the snippet to see the result.
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
position: relative;
padding: 10px;
}
.yellow {
position: absolute;
left: 20%;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 80%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
I have made a rough snippet for the use case please build on top of it.
.relative{
position:'relative';
width:150px;
height:50px;
}
.static{
position:absolute;
}
.hoverable{
width:100%;
height:100%;
background-color:yellow;
transition:transform 1s;
}
.hoverable:hover{
transform:translate(150px,0px);
}
<div class='relative'>
<div class='static'>Static Text</div>
<div id='yellow' class='hoverable'/>
</div>
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
/*added this class*/
.child-1 {
position: absolute;
z-index: 10;
}
#yellow-con {
background-color: #000000;
position: relative;
height: 25px;
}
.yellow {
position: absolute;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 100%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(1);
}
#yellow-con:hover b {
color: black;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div id="yellow-con">
<div class="child-1"><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
When I view my web on full size, it will show like the left image.
When I narrow the window, it will display like the right image
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
max-height: 1200px;
}
body {
max-height: 1200px;
overflow-y: hidden;
color: rgba(88,88,88,0.92);
}
#bgimg{
width: 40%;
margin: 0;
padding: 0;
max-width: 864px;
}
.bgimg{
background: url(sideimage_4.png) no-repeat center ;
background-size: cover;
height: 1100px;
margin: 0;
}
.goleft{
float: left;
}
#sideright{
width: 60%;
float: right;
background-color:white;
height: 1100px;
overflow: scroll;
overflow-x: hidden;
margin-left: auto;
}
#intro{
width: 100%;
margin: 0;
padding: 0;
background-color: white;
}
#introinner{
text-align: center;
padding: 10% 10px;
}
#introinner h1{
font-family: 'Sofia';
font-size: 500%;
font-weight: 800;
}
#introinner p{
margin: 8px;
font-family: 'Sofia';
}
#introinner a i{
font-size: 80%;
color: rgba(88,88,88,0.92);
}
#banner{
width: 100%;
margin: 0;
padding: 0;
}
#banner img{
width: 100%;
}
#cf {
position:relative;
width:100%;
margin:0 auto;
}
#cf img {
width: 100%;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
#selfintro{
margin-top: 500px;
clear: top;
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/homecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">
</head>
<body>
<nav id="bgimg" class="goleft">
<div class="bgimg"></div>
</nav>
<section id="sideright" class="goleft">
<section id="intro">
<div id="introinner">
<h1>Troy Wu</h1>
<p>The King in the South</p>
<i class="fa fa-download">DownLoad My Pic</i>
</div>
</section>
<section id="banner">
<img src="http://via.placeholder.com/350x150">
</section>
<div id="cf">
<img class="bottom" src="http://via.placeholder.com/350x150">
<img class="top" src="http://via.placeholder.com/450x150">
</div>
<div id="selfintro"><img src="http://via.placeholder.com/350x150"></div>
<p>asdfasdf asd</p>
</section>
</body>
</html>
I post my code for these two sections. I am pretty sure that the issue happens on the div (cf), because of the position:relative and absolute. I tried to put a margin-top on the css, but it doesn't work. I've been trying to solve this for two days, and still have not clue to this. can you help me solve this issue? how to avoid the space between these two sections?
The problem is usually caused by the elements being inline-block elements instead of block elements, and as inline-block elements respect the whitespace in the markup, you get these gaps between elements.
You can reduce the font-size to zero, and as the space is dependent on the font size, that can solve the problem, or you can remove all the whitespace in your markup (which makes for messy HTML), or you can make the offending elements block items instead of inline-block items if that does't break your layout.
As I don't see any text on your layouts, I would set the font size to zero and see if that solves it, and then set the font size specifically on spans or divs containing text if you need to add labels or titles etc.
I have a working transition and a broken transition, as far as I can tell I'm doing the same thing on both.
main.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Lorem ipsum</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="content">
<div class="button"><span class="button-content">transformer</span></div>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</body>
</html>
main.css:
#content {
background-color: lightgray;
transition: width 2s ease, height 2s ease;
}
#content:hover {
width: 800px;
height: 400px;
}
.button {
background-color: gray;
width: 100px;
height: 50px;
border-radius: 10px;
border: 2px solid #73AD21;
text-align: center;
transition: width 2s ease, height 2s ease;
}
.button:hover {
width: 150px;
height: 100px;
}
.button-content {
line-height: 50px;
}
The button transitions nicely when hovered over, but the content div changes size instantly with no transition! I'm at a loss.
It's because the height and width for the #content div before hover takes place are not defined. The buttons dimensions are defined.
I am currently trying to learn CSS3 techniques to implement on my website. I found this code online for sliding image boxes (http://www.pixelforlife.com/html-css3-sliding-image-boxes/). When you hover over the boxes, its supposed to move upwards revealing the text hidden behind it. The problem is when I run it on chrome, firefox or IE the smooth transition effect doesn't work. I tried to change the webkit values and stuff but still couldn't get it to work. Any help would be greatly appreciated.
Thanks
<!doctype html>
<html lang="en">
<head>
<title> www.PixelForLife.com - Sliding Block </title>
<style type="text/css">
body { font: 13px sans-serif; }
#montage-wrap { width: 820px; height: 200px; }
.montage-block { width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;
margin: 0 4px 0 0; background: white; border: 1px solid #666;}
.montage-block:last-child { margin: 0; } /* removes margin on last block */
#block1 { width: 200px; height: 200px; position: absolute; display: block;
background: url("pixelforlife_thumb.png") no-repeat;
-webkit-transition: top .3s ease-in-out; }
.montage-block:hover #block1 { top: -150px; }
.thumb_content { padding: 70px 15px 0 15px; color: #777; }
.thumb_content h1 { margin: 0 0 5px 0; color: #666; font-size: 14px; }
</style>
</head>
<body>
<div id="montage-wrap">
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
<!-- A sample Block -->
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
</div> <!-- montage wrap -->
</body>
</html>
i changed the css position: top to margin:top
Its worked for me
#block1 {
width: 200px;
height: 200px;
position: absolute;
transition: all 0.5s ease-in-out;
}
.montage-block:hover #block1 {
margin-top: -100px;
}
Demo
probably this is the one you wanted
DEMO HERE
#block1 {
background: url("pixelforlife_thumb.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 200px;
position: absolute;
top: 0;
transition-delay: 0.5s;
transition-duration: 1.5s;
transition-property: top;
width: 200px;
}
and on hover
#block1:hover {
top: -150px ;
}
don't use same id on same page. an ID is unique per page.
You have 2 span with the same id :
<span id="block1"></span>
Change id="block1" to class="block1" and don't forget to change it in your css too.