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.
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 trying to make a simple portfolio website and I want two tags at the bottom of the screen whenever I navigate down or up the page. So for example, if I am at the top of the page it says my name with three links, "About Me", "My Work", and "Contact". If I click on "About Me" it will navigate me down the page to where I have that section. Then this is where I need help, I want "My Work" and "Contact" at the bottom for easy navigation. I have been trying to figure this out for hours now which is why I am now asking a question on here. I am new to web programming so excuse me. Here is some of my code that is relevant.
#container {
padding-top: 100vh;
width: 100%;
height: 100vh;
color: white;
}
#container div {
position: relative;
width: 100%;
height: 100%;
}
/* Styling for each indivual link (About Me, My Work, Contact) */
#container div#AboutMe {
background: white;
color: black;
font-family: Helvetica;
font-weight: lighter;
text-align: center;
font-size: 21px;
}
#AboutMe p {
padding-right: 60%;
padding-left: 10%;
padding-top: 5%;
}
.animatedButtonBody span {
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.animatedButtonBody:hover span {
padding-right: 25px;
}
.animatedButtonBody:hover span:after {
opacity: 1;
right: 0;
}
<div id="container">
<div id="AboutMe">
<h1>About Me</h1>
<p>
This is where some text will go.
</p>
<span>My Work</span>
<span>Contact</span>
</div>
</div>
You can try position:fixed. Also you should tidy up your html elements (wrap things in div, etc.)
Example:
.nav {
height: 60px;
background-color: grey;
}
.content{
height: 500px;
background-color: lightgreen;
}
.footer{
height: 60px;
width: 100%;
background-color: black;
position: fixed;
bottom: 0px;
}
<div class = "container">
<div class = "nav">
</div>
<div class="content">
</div>
<div class = "footer">
</div>
</div>
Hope it helps
I figured out the answer to my problem. Here is what I added to my tags.
#pinButton1 {
position: absolute;
bottom: 0;
transform:translateX(-100%)
}
#pinButton2 {
position: absolute;
bottom: 0;
transform:translateX(0%)
}
<span>About Me</span>
<span>Contact</span>
Not tested, but you can try it. You need an element with "position:fixed", this way it stays on the screen when scrolling.
<style>
.float-container {
position: absolute;
bottom: 0;
}
.about-me {
position:fixed;
}
</style>
<div class="float-container>
<div class="about-me">
<p>Some Content</p>
</div>
</div>
You should check out position:fixed and position:absolute.
Link to W3Schools: HERE
You didn't clarify what does "at the bottom" mean, therefore I give 2 examples. This is how I understood your question.
If you need buttons to be always in viewport at the bottom of the screen use this example with custom values. Here you have an example how to center an item at the bottom center of the viewport.
#example{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%)
}
If you need an item to be at the bottom of the page use
#example{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%)
}
Hello I'm trying to hide / display an absolute positioned text on image hover with transform scale effect and shadowing background I had some problems with z-index and div containers. What I'm trying to achive is:
Before hover:
On hover:
I know I could wrap text into div and then change visibility or display css property on hover but it doesn't work for me. Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-lg-4 column" *ngFor="let clientProject of clientProjects; let i= index">
<button class="btn button-modal" data-toggle="modal" [attr.data-target]="'#' + i">
<span class="hidden-text">TEXT</span>
<img src="{{clientProject.clickImageButtonPath}}" class="img-fluid image">
</button>
</div>
</div>
</div>
css:
.image {
width: 100%;
height: 400px;
transition: all 0.3s ease-in-out;
z-index: 1;
opacity: 0.35;
}
.button-modal {
padding: 0 !important;
overflow: hidden;
background-color: black;
}
.button-modal:hover {
padding: 0 !important;
}
.hidden-text:hover + .image,
.image:hover {
transform: scale(1.2);
}
.column {
margin: 0 !important;
border: none;
padding: 0 !important;
}
.hidden-text {
display: block;
z-index: 2;
color: white;
font-size: 2rem;
border: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
position: absolute !important;
}
Could someone help with this please?
I'm not sure what you're trying to do exactly, so I think it would be good to figure out what element you want to trigger the action on, then tell that element to hide and show the text. I'm also not sure if you're trying to do this all CSS or not, but I would typically do something like this. Be aware that this is jQuery, which I assume you're using if you're using bootstrap, and this is just an example of what you can do with a simple bit of jQuery code in this example. Here's a link to a working fiddle http://jsfiddle.net/aq9Laaew/110775/ and here's the code I used to achieve the result:
$('.button-modal').hover(function(event){
$(this).find('.hidden-text').show();
},function(){
$(this).find('.hidden-text').hide();
});
jQuery hover handler is actually 2 functions inside, one for mouseover (hover start) and one for mouseout (hover end), and it makes this easy, so you can do one thing on the start (show your text) and another on the end (hide your text) all in a nice little packaged function. You can also split these out and do mouseover and mouseout individually. I would also edit your CSS a little if you're going to use this approach, like this:
.button-modal:hover {
padding: 0 !important;
transform: scale(1.2);
}
.column {
margin: 0 !important;
border: none;
padding: 0 !important;
}
.hidden-text {
display: none;
z-index: 2;
color: white;
font-size: 2rem;
border: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
position: absolute !important;
}
Try this:
<style type="text/stylesheet">
.container:hover #cts {
display: block;
}
</style>
<div class="container">
<div class="img" style="position: absolute; width: 500px; height: 500px; z-index:0;">
<img src="https://i.stack.imgur.com/Az76Y.png"></img>
</div>
<div id="cts" class="text-box" style="display: none; position: absolute; display: table; margin-left: auto; margin-right: auto; background: rgba(0,0,0,0.4); text-align: center; height: 500px; width: 500px; z-index: 1; transition: all .3s ease;">
<div class="text-box-inner" style="display: table-cell; height: 500px; width: 500px; vertical-align: middle; margin-left: auto; margin-right: auto;">
<span class="text" style="color: #fff;">ANY TEXT</span>
</div>
</div>
</div>
<script type="text/javascript">
This question already has answers here:
How to overlay images
(11 answers)
Closed 5 years ago.
I want to highlight an image when a user hovers over it.
To do that, I'd like to put an overlay over everything else (or honestly, I'd be happy putting an overlay over everything including the image, and then putting something to brighten the image as well).
Is there anyway to do this without JS? I'm happy to use a JS solution if that's all that's available, but I was wondering if there was any CSS-only trickery that could manage to do this.
Example HTML would be like this:
<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>
Preferably everything would be darkened except the <img> tag.
You could use a sibling selector: .container img:hover ~ .overlay { background-color: rgba(0,0,0,0.8); }
body {
}
.container {
position: relative;
text-align: center;
margin: 10px auto 0;
padding-bottom: 10px;
}
.container .other {
display: inline-block;
margin: 20px 10px 10px;
width: 100px;
height: 100px;
background-color: darkorange;
z-index:1;
}
.container img {
display: inline-block;
margin: 10px 10px 10px;
z-index:1;
position: relative;
transition: all 300ms ease;
}
.overlay {
background-color: rgba(0,0,0,0);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
z-index:1;
transition: all 300ms ease;
}
.container img:hover ~ .overlay {
background-color: rgba(0,0,0,0.8);
}
.container img:hover {
z-index: 2;
transform: scale(1.1);
cursor: pointer;
}
<body>
<div class="container">
<div class="other"></div>
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=2" />
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=4" />
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=6" />
<img src="https://picsum.photos/100/100?image=8" />
<div class="overlay"></div>
</div>
</body>
Im trying to make a block with overlay hover effect (default: weak black background color - Hover: none black background) and an icon and text in the middle that stays in the same state all the way.
How do i get the icon and text to stay in the same state (no hover effect)?
Ive tried several rules to the overlay div and the icon div without any luck.
Is there any css rule that provide some kind of exclusion?
I managed to get it to work by adding them outside the divs that has overlay background, but it didnt work out well as the hover effect breaks when you hover over the icon and text.
Here is the code: https://www.w3schools.com/code/tryit.asp?filename=FEMUM4N9T30Q
<style>
.media-front-top-picture{
background-image: url("");
height:500px;
}
.media-front-top-icon{
content: url(");
width: 130px;
margin: auto;
padding-top: 200px;
opacity: 1;
}
.media-front-txt{
font-size: 22px;
letter-spacing: 8px;
color: white;
margin-top: 15px;
}
.media-front-bottom-picture{
background-image: url("h");
height:500px;
}
.media-front-bottom-icon{
content: url("");
width:130px;
margin: auto;
padding-top: 200px;
}
.media-picture-container {
position: relative;
}
.media-picture-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.47);
}
.media-picture-overlay:hover {
opacity: 0;
cursor:pointer;
}
</style>
<div class="body-media">
<div class="media-picture-container">
<div class="media-front-top-picture" style="border-bottom:4px solid white;">
<div class="media-front-top-icon"></div>
<div class="media-front-txt">VIDEOS</div>
<div class="media-picture-overlay"></div>
</div>
</div>
<div class="media-picture-container">
<div class="media-front-bottom-picture" style="border-bottom:4px solid white;">
<div class="media-front-bottom-icon"></div>
<div class="media-front-txt">PICTURES</div>
<div class="media-picture-overlay"></div>
</div>
</div>
</div>
for the classes on your icons, add a z-index higher than a z-index you add to the overlay class. Also, make sure to make the icon classes have position:relative so the z-index is applied. Note, my example only applies this solution to one icon, its up to you to apply it elsewhere.
Example:
.media-front-top-icon{
content: url("example.com");
width: 130px;
margin: auto;
padding-top: 200px;
opacity: 1;
z-index:10;
position:relative;
}
.media-picture-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.47);
z-index:5;
}