I want to place a image inside a rectangle and have the image move to the right while the rectangle is being stationary and not moving. My problem is that I cant manage to put the image inside the rectangle without the rectangle moving. I got the result I want with a specific screen size
by using margin and positioning the image but when I resize the window it will not be in the same place.
How to keep it in the image inside the rectangle at the same place?
body {
margin: 0px;
}
.top-shelf {
height: 5vh;
width: 100vw;
background-color: rgb(40, 121, 197);
opacity: 50%;
}
.logo-outline {
border-radius: 35px;
border: 5px solid rgba(4, 22, 29, 0.137);
width: 130px;
height: 130;
margin-top: 1%;
margin-left: 3%;
padding: 30px;
}
.rotate-logo{
position: absolute;
top: 7%;
left: 3%;
transition: all 4s;
-webkit-transition: all 4s;
transform: translate(130px, 0);
-webkit-transform: translate(130px,0);
background-image: url('owl-logo.png');
}
.text-heading{
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cool Name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top-shelf"></div>
<div class="logo-outline">
<img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" class="rotate-logo" width="70" height="70">
</div>
<div class="text-heading">
<h1 style="font-family: courier;">Cool title</h1>
</div>
</body>
</html>
strong text
One thing you could try is just letting the image stay in the div, letting it flow on the page as it normally would. If the image is just in the div, it should automatically be sized to fit its contents. You could then affect the position of the image using CSS properties like margin or transform.
#logo-outline {
border-radius: 35px;
border: 5px solid rgba(4, 22, 29, 0.137);
width: 130px;
padding: 2px;
}
#rotate-logo {
height: 70px;
transition: transform ease 100ms;
}
#logo-outline:hover #rotate-logo {
transform: translateX(60px); /* 130px - 70px width */
}
<div id="logo-outline">
<img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" id="rotate-logo">
</div>
Related
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!
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>
Having trouble trying to get a certain effect going on:
I have an image. I want to hover over it. It should turn a little black and have some text pop up.
example ^
What's the easiest/simplest setup to do this? Preferably only HTML and CSS
Note: The element needs a background-image being set in CSS.
.thumbnail {
background-image: url(potato.jpeg);
height: 400px;
width: 450px;
}
.thumbnail:hover {
background: rgb(0, 0, 0);
height: 400px;
width: 450px;
opacity: 0.5;
transition: 0.8s;
}
\
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="thumbnail"> </div>
</body>
</html>
You should use a seperate element for the overlay, in my example a child element. Only the hover status is visible, the regular status isn't, due to opacity: 0
.thumbnail {
background-image: url(https://placehold.it/450x400/fa0);
height: 400px;
width: 450px;
}
.overlay {
background: rgb(0, 0, 0);
height: 400px;
width: 450px;
opacity: 0;
transition: 0.8s;
}
.thumbnail:hover .overlay {
opacity: 0.5;
}
<div class="thumbnail"><div class="overlay"> </div> </div>
It becomes a bit more complex when text is involved which should have no opacity at all: In the following example the overlay element has a semi-transparent background-color and gets opacity: 1 when the parent is hovered. That way the text has no opacity when hovered, but the background still has due to its own opacity setting of 0.5:
.thumbnail {
background-image: url(https://placehold.it/450x400/fa0);
height: 400px;
width: 450px;
}
.overlay {
background: rgba(0, 0, 0, 0.5);
height: 400px;
width: 450px;
opacity: 0;
transition: 0.8s;
font-size: 36px;
color: #fff;
}
.overlay:hover {
opacity: 1;
}
<div class="thumbnail"><div class="overlay">SOME TEXT</div></div>
Is there a fix for cropping a round image from a square one that will get rid of my white border left behind.
I am trying to use animation css to rotate an earth image in a stary sky. Right now, I am struggling with a white border left over from cropping my image.
I don't have Photoshop right at the moment and I am having a hard time finding a free photo editor that will suffice. My macbook air 2016 model is supposed to have this feature in the preview mode, but it is not high-lit thus unavailable and I don't know why. Any help would be so appreciated it is ridiculous!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--animationlibrary githib url-->
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>
</head>
<body>
<div>
<img id="starrySky" src="img/stary_nebula.jpg" alt=""/>
</div>
<img id="earth" name="earthRotate" src="img/my_round_earth.jpg" alt=""/>
<style>
img{
position: absolute;
left: -10px;
top: -15px;
height: 175px;
width: 175px;
}
**this is what I have now....**
div#earth{
transform: skew(20px, -10px);
transform: rotate(45deg);
border-radius: 50%;
overflow: hidden;
width:150px;
height:150px;
}
img#earth{
background-image: url("https://s.yimg.com/fz/api/res/1.2 /oaK.yDOhW_y44_tplykRWA--/YXBwaWQ9c3JjaGRkO2g9MTE2ODtxPTk1O3c9MTcwMA--/http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg");
}
#earth{
position: absolute;
top: 0px;
left: 600px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
border-radius: 50%;
-webkit-animation-name: earthOrbit;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
overflow: visible;
}
#-webkit-keyframes earthOrbit{
from{ -webkit-transform: rotate(0deg); }
to{-webkit-transform: rotate(360deg);}
}
#starrySky{
position: relative;
top: -10px;
left: -10px;
width: auto;
height: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
text-align: center;
font-size: 25px;
}
</style>
</body>
</html>
just specify what size the parent <div> has and use overflow: hidden if necessary.
extra: to crop in different shapes, just transform the parent <div>, e.g.:
transform: skew(20px, -10px),
transform: rotate(45deg),
border-radius: 50%
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.