I am trying to slide a div over another div with text inside, however I don't want the text to move with the div, I just want the div to slide over the text (and mask/hide it) while the text stays where it is.
I'm still a newbie so my apologies in advance if this doesn't make sense :D Here is a reference that is super similar to what I'm trying to achieve, however instead of the text falling, I just want the div to slide over the text (and hide it) without the text moving at all:
ref
Here's their code:
html:
<div>
<h2>test,</h2>
<h2>test,</h2>
<h2>test.</h2>
</div>
css:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: 100px;
height: 100px;
background: #efefef;
/* Overflow HERE .. not on the
elements being tweened */
overflow: hidden;
h2{
position: relative;
color: black;
font-weight: bold;
height: 33.3%;
margin: 2px 4px;
}
}
js:
let preloaderAnim = new TimelineMax();
preloaderAnim.staggerTo('h2', 1, { y:'200%', delay: 1}, .15);
I've heard that overflow:hidden might be useful, but I'm not sure how to use it in this case...
I would also like to use GreenSock for the animation!
Thanks in advance :)
Related
I apologize for the title I'm not sure how to explain what I'm trying to do in one sentence. I'm working on a WordPress site, and I need to make a bunch of images look like the background image in the "Plastic Surgery" section of this page https://rinklefreeps.wpengine.com/
I could go through and edit them all with photoshop but I feel like if there is a way to code this out it would be a lot better because then if I ever need to change any of them all I need to do is put the image in and it will already look right. I also need to be able to put alt tags on them.
So I guess what im saying is I need to recreate the "Plastic Surgery" section with a background image that I can put an alt tag on. I'm jsut not quite sure where to start with this any help would be great. Thanks Guys!
If you wrap the img in an element, you can use the ::before/::after pseudo classes to make a semi-opaque overlay using rgba() and a slanted, solid overlay using positioning with a background-color and transform: rotate() to create the slant.
* {margin:0;padding:0;box-sizing:border-box;}
.imgContainer {
width: 50%;
margin: auto;
overflow: hidden;
position: relative;
}
.imgContainer::after, .imgContainer::before {
content: '';
position: absolute;
}
.imgContainer::after {
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(255,255,255,0.5);
}
.imgContainer::before {
height: 200%;
width: 50%;
background: #fff;
left: 0;
transform: translate(-40%,-50%) rotate(15deg);
}
img {
max-width: 100%;
}
.text {
position: absolute;
top: 50%; left: 50%;
width: 80%; height: 80%;
transform: translate(-50%,-50%);
background: rgba(255,255,255,.3);
z-index: 1;
padding: .5em;
}
<div class="imgContainer">
<img src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg" alt="alt">
<div class="text">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
I'm trying to replicate the menu design used by:
https://www.pandaexpress.com/menu/appetizers
I think I am at the point where I need to use javascript/jquery, but I'm very new and unsure of my next step. When the user hovers over an image the image seems to slide into focus and display information below. I have tried to isolate this into separate actions, modeled by the following jfiddles:
https://jsfiddle.net/Lrqu8L0q/3/ (enlarges and focuses image on hover)
https://jsfiddle.net/4ud7wnop/1/ (slides down to reveal text on hover)
I tried combining them but when I add the
<p>This text is displayed on a downward slide after hover</p>
to the first jfiddle the paragraph isn't hidden.
Now I'm having trouble trying to think of a way to combine the both. I think I need to use javascript/jquery to create a function that applies the slide down to reveal text after the image enlarge has been completed. I'm very new to web design as a whole and am especially shaky with javascript and jquery.
I was wondering if I could write a function that checks if the image has expanded on enlarge yet, and after it's reached a desired height/width run the text slide function. Really not sure how to do this.. could someone point me in the correct direction?
I merged them together here: https://jsfiddle.net/danbovey/53ya31gm/
The main problem was, you need the image to be larger to cover over any detail text you may have.
I have commented on most changes I added in the fiddle. But here's the key parts:
I renamed the bg element to tile, it seemed more appropriate. Instead of working with height for the .slide-down class, I created a transform on the details div when the tile is hovered.
.tile:hover .details {
transform: translateY(150%);
}
You can learn about CSS transforms here: http://css3.bradshawenterprises.com/transforms/
The percentage of the transform can be calculated as the height of img / height of details - 300px / 200px = 150%
To create the growing effect, a pseudo :before element adds a white area the same size of the image before the tile, and when hovered, grows to 25px around each edge. And an identical element is added to the details div.
.tile:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
transition: all 0.4s ease;
content: '';
}
.tile:hover:before {
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
}
Is this what you want here?
https://jsfiddle.net/Lrqu8L0q/9/
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
border-radius: 2px;
}
.bg:hover {
transform: scale(1.25)
}
.bg{
width: 150px;
height: 110px;
background-color: teal;
border-radius: 2px;
}
.slide-down {
border-radius: 3px;
height: 60px;
width: 150px;
position: relative;
transition: height 0.3s;
-webkit-transition: height 0.3s;
text-align: center;
overflow: hidden;
background-color: teal;
}
.bg:hover .slide-down {
height: 140px;
}
.container{
position: relative;
left: 150px;
top: 50px;
}
<div class="container">
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
</div>
Basically what you need to do is put both your requirement into 1 combined object (in this I mean put both the Image & Text inside 1 container) like in the above example
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
Both of them are put inside 1 container with class .bg, then what you want is to hover the container (not the thumbnail or description itself) and trigger both the scaling & slide-down the menu detail, you can do this by adding the CSS
.bg:hover { ... }
For the scaling, you need to put it together with the container so all the elements inside will be scaled to, then for the description inside it, you need to use
.bg:hover slide-down { ... }
This is where you set the animation that will expand the description of the menu (for explanation, this CSS will trigger on .bg hover, and applied to the element .slide-down inside of it)
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;
First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.
try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}
I'm working on a hobby project of mine -- it's something of a glorified RSS feed reader/grabber. I've been able to get most things working, but for some reason I cannot get the text in a certain span to be drawn above an animated div.
When a feed is grabbed, certain operations are performed before displaying the results. During this time, I keep track of the progress and display them in an animated "progress bar" div. All of the sub-operations each have their own progress bars, and they all work correctly (text on top of bar), but the final progress bar (overall progress) does not layer the text correctly.
I created a simple mock-up in JSFiddle to give an example of my problem.
$('#progress-total-box').bind('click', draw);
function draw() {
if (($('#progress-totalbar-fill').css('width')) == "0px") {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: '100%'}, 2000, function() {
var description = document.createElement('span');
$(description).attr('id', '#progress-total-text');
$(description).html('100%');
$('#progress-totalbar-empty').append(description);
$('#progress-total-box').bind('click', draw);
});
}
else {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: 0}, 2000, function() {
document.getElementById('progress-totalbar-empty').innerHTML = '';
$('#progress-total-box').bind('click', draw);
});
}
}
The style/position/etc is purely for sake of demonstration. In this example, when the grey loading bar div is clicked, it animates its width from 0% to 100% (or vice-versa). When the animation is complete, a new child span is created and appended to the 'empty bar' background div, wherein the total percentage is displayed (100%, in this case).
This span element is intentionally removed when the bar is reset.
Do you guys have any ideas as to what's going wrong, and how I can fix it?
I have encountered this error is present in both Chrome and Firefox.
Thanks in advance!
There are multiple problems here.
First off, you need to remove the # from this line
$(description).attr('id', 'progress-total-text');
The new span, was never getting the css it was supposed.
Second, you need to either change your markup or your css.
In this case, I updated the CSS, but the id name don't make sense anymore
body {
width: 100%;
height: 125px;
margin: 0;
}
#progress-category-box {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
background-color: red;
}
#progress-total-box {
position: relative;
width: 100%;
height: 40px;
top: 32.5%;
float: right;
text-align: center;
background-color: #515A5C;
}
#progress-totalbar-empty {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #97b0b1;
background-color: transparent;
z-index: 3;
}
#progress-totalbar-fill {
position: relative;
width: 0%;
height: 100%;
top: -42px;
border-left: 1px solid #97b0b1;
border-top: 1px solid #97b0b1;
border-bottom: 1px solid #97b0b1;
background-color: #00FF00;
z-index: 2;
}
#progress-total-text {
position: relative;
color: black;
top: 30%;
font-size: 15px;
z-index: 3;
}
Thing is, you were showing the animated div over the text.
So I put the text over the animation and put a transparent background behind it.
I applied the grey background to the container instead. I also changed it's height and applied height:100% to it's children.
Here's a full fiddle