I hope, this question wasn't asked before, but I searched the net and didn't find an answer.
I'm trying to do a slide over over an image. There are lot's of examples in the internet, but they don't seem to work for me.
The slide works, but the sliding div shows before and out of the target image.
Here is my code:
div.details {
position: absolute;
left: -250px;
top: 0px;
width: 240px;
height: 170px;
overflow: hidden;
margin: 0px;
padding: 5px;
opacity: 0.7;
background-color: grey;
color: white;
transition: all .5s;
display: block;
transition: all 0.5s;
-webkit-transition: all .5s;
}
div.project:hover div.details,
div.project-nl:hover div.details {
left: 0px;
}
<div class="project">
<a class="fancybox" href="/index.php/assets/Uploads/th2.jpeg">
<img src="/index.php/assets/Uploads/_resampled/SetSize250180-th2.jpeg" alt="Project2" />
<div class="details">
<h2 class="ptitle">Project2</h2>
<p>Nullam suscipit diam et leo malesuada finibus. Pellentesque hendrerit porta sodales. Suspendisse volutpat eros sapien, et ullamcorper orci condimentum vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Maecenas auctor auctor.
</p>
</div>
</a>
</div>
This is how I found it in the net, and there it works fine, just, that when I try it, the sliding div is visible all the time.
Is there a way to hide the div, and just show it when it enters the image?
I tried display:none, but then the div just appears, without a slide effect.
Any help would be apreciated.
Just posted it, an now I got the answer.
I have to set overflow:hidden; on the containing (div class=project) div.
Related
I'm new to StackOverflow, still learning fullstack web-development.
Just started creating my own website and I'm stuck at my image keeps displaying behind the next div's item, not right below the text. :(
Please help me!! Thank you :D
HTML
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-8 text-container">
<p>
<h1>laoreet ante eget, vehicula ligula.</h1><br />
sed odio eu, eleifend aliquet urna. Donec ultrices dapibus ipsum.
Suspendisse ac hendrerit augue. Pellentesque massa eros, auctor ac sapien a, lacinia
luctus dolor. Proin et eleifend quam. Mauris tristique dictum tellus vitae molestie.
Praesent
auctor justo nisl, eu porta leo aliquam at.
</p>
</div>
<div class="col-sm-4">
<img src="images/picture.png" class="picture-container my-picture" alt="">
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 700px;
background-color: #ed8d8d;
}
.container {
height: 500px;
padding: 80px 0px;
}
.text-container {
width: 700px;
height: 500px;
float: left;
margin-top: 80px;
text-align: right;
}
.picture-container {
overflow: hidden;
}
/* IMAGES */
.sophie-picture {
height: 450px
}
Inside your HTML code, the "picture-container" class on the IMG element should likely be moved, so it sits on the "col-sm-4"-div above.
I suspect the "my-picture" class on the IMG and the "sophie-picture" class in the CSS should be the same thing ? most likely you've renamed one of them and forgot to do the same in the other file, If so you should rename one so their names match up again.
There's a </div> missing at the end of the HTML code here, but i suspect that is likely just the case here because you only pasted part of your HTML document, and not the case in your own version.
The reason your image and text-container overlap is the use of float.
Removing that likely solves most of the issue.
But judging by the col-sm-8 style classnames i'm guessing you're using something like bootstrap ? Those classes apply a whole bunch of CSS (that you don't particularly have to worry about), but they provide the "column(s) within row; row(s) within container"-style of rapidly building a layout. If you're using those classes its best not to mix it with floats, manual width/height and margin statements, or really any significant CSS (just cosmetic only things like colors, font bold/italic, ...). Bootstrap has many classes so you effectively don't have to write any CSS yourself (classes like mb-4 or such for margins for example).
I would suggest using 1 or the other for a given container:
either building it the bootstrap-way with container/row/col and then using the margin/color/etc classes from boostrap.
or writing the CSS yourself, but then not using those bootstrap classes.
move the h1 tag above the p tag and set margin-bottom on the p tag to 0. also picture-container has no declared height so overflow:hidden won't do anything there. aplly overflow:hidden to wrapper.
.wrapper {
width: 100%;
height: 700px;
background-color: #ed8d8d;
border:solid 2px red;
overflow:hidden;
}
.container {
height: 500px;
padding: 80px 0px;
border:solid 2px blue;
}
.text-container {
width: 700px;
height: 500px;
float: left;
margin-top: 80px;
text-align: right;
border:solid green 2px;
}
.picture-container {
overflow: hidden;
}
p{
margin-bottom:0}
/* IMAGES */
.sophie-picture {
height: 450px
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-8 text-container">
<h1>laoreet ante eget, vehicula ligula.</h1>
<p>
sed odio eu, eleifend aliquet urna. Donec ultrices dapibus ipsum.
Suspendisse ac hendrerit augue. Pellentesque massa eros, auctor ac sapien a, lacinia
luctus dolor. Proin et eleifend quam. Mauris tristique dictum tellus vitae molestie.
Praesent
auctor justo nisl, eu porta leo aliquam at.
</p>
</div>
<div class="col-sm-4">
<img src="https://via.placeholder.com/450" class="picture-container my-picture" alt="">
</div>
</div>
</div>
</div>
I am using the following CSS ONLY code to show or hide full paragraphs. Please refer to the snippet below. Working perfectly! However, we all know that such "Show More" buttons are intended to be displayed only if the text in the paragraph is too long. The problem is that though the button is working fine here and doing its job of showing or hiding text well enough, it still shows up even when the sentence is too short or text is too limited (say like 1 or 2 line texts that can be read easily and do not require the "Show More" button). How can I hide that button and show up only when the text is long enough for the button to actually appear? Also, in case of long sentences when the show more button would actually be shown, I want 3 dots at the end of the sentence (like...) which represents that there are more text to be read. And these 3 dots show go away when the para is expanded and should come back when the para is contracted back.
P.S: I am expecting a CSS ONLY answer. No jQuery or Javascript please as I want to keep it plain and do not want to mess it up all.
.panel-wrapper {
position: relative;
width: 500px;
margin: 0 auto;
}
.show, .hide {
position: absolute;
bottom: -1em;
z-index: 100;
text-align: center;
color: red;
}
.hide {
display: none;
}
.show:target {
display: none;
}
.show:target ~ .hide {
display: block;
}
.show:target ~ .panel {
max-height: 100%;
}
.show:target ~ .fade {
margin-top: 0;
}
.panel {
position: relative;
width: auto;
max-height: 40px;
overflow: hidden;
}
.fade {
height: 20px;
position: relative;
}
<div class="panel-wrapper">
Show more
Show less
<div class="panel">
Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
</div>
<div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
Show more
Show less
<div class="panel">
Let us not wallow in the valley of despair, I say to you today, my friends. And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation
will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners
will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom
</div>
<div class="fade"></div>
</div>
<br><br><br>
<div class="panel-wrapper">
Show more
Show less
<div class="panel">
Consider this short text. Short enough to hide "Show More" button.
</div>
<div class="fade"></div>
</div>
I would recreate all the feature differently where I will rely on small hack using position:sticky and consider the use of :active/:focus instead of :target.
This cover only your first point. See comment in the code for the details.
This isn't a perfect solution, it's more an approximation as you will find some drawbacks.
.wrapper {
line-height:1.2em; /* explicitely set the height of line to easily control */
max-height: calc(2*1.2em + 2em); /* Show at max 2 line*/
width: 500px;
margin: 20px auto;
overflow: hidden;
}
.wrapper .content {
position:relative;
}
/* This will hide the show/less if the content is 2 lines or less*/
.wrapper .content:after {
content:"";
position:absolute;
top:106%; /* Start at the end of the content */
left:0;
right:0;
z-index:1;
background:#fff;
height:100px; /* A big height */
}
/**/
.wrapper :nth-last-child(1),
.wrapper :nth-last-child(2) {
/*make the element sticky so they show above the content if the content is big
and the after will no more hide them
*/
position: sticky;
bottom: 0;
background: #fff;
cursor:pointer;
outline:none;
color:red;
line-height:2em;
}
.wrapper:focus,
.wrapper:active {
outline: 0;
max-height: 400px;
}
/*make the after and the "show more" on click*/
.wrapper:focus .content:after,
.wrapper:active .content:after,
.wrapper:focus :nth-last-child(1),
.wrapper:active :nth-last-child(1) {
display:none;
}
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ipsum nunc, hendrerit ac arcu eu, pulvinar ultrices enim. Ut at enim bibendum, iaculis turpis ac, congue dui. Etiam faucibus lectus eget lorem molestie, finibus aliquet quam pretium. Donec
eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin
massa quis, eget tellus porta, sollicitudin massa quis,</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
<div class="wrapper" tabindex=-1>
<div class="content">Lorem ipsum dolor eget tellus porta, sollicitudin massa quis, eget tellus porta, sollicitudin eget tellus porta, sollicitudin sollicitudin eget tellus porta, sollicitudin</div>
<div tabindex=-1>show less</div>
<div>Show more</div>
</div>
I've made a codepen at http://codepen.io/anon/pen/vNVMRE
I know how to make a sticky footer.
However, in my case my content (.moveDown) needs to be positioned absolute, because of that the footer doesn't stick at the bottom.
You can check that in the codepen. If you make the window smaller until you have scroll bars, the footer moves over the content and stays in the new position;
Of course I could make the .movedown div relative by changing the code on line 40 & 41 to
position: relative;
top: 0;
But then my mobile version gets problems.
I have made a simplified version # http://lettherobots.be/test2/
As you can see, the footer works until there's a scroll bar.
If you scale the window to max-size 460 there's a vertical menu which can be accessed through the hamburger.
If I make the position of the content wrapper (.moveDown) relative, then the links in my vertical navigation become inactive. I have tried fixing that with z-index, but that didn't solve the problem.
Any idea how I can get this fixed? How I can get a footer at the end of my documents even if the content of the page
Some of the code:
Html:
<body>
<div class="container">
<div class="navContainer">
<nav class="horizontalNav">
....
</nav>
<nav class="verticalNav" id="verticalMenu">
...
</nav>
</div>
<div class="content moveDown clearfix">
<header>
<img src="images/headerPic.jpg" alt="Header picture">
</header>
<div class="htmlWrapper">
{$importedContent}
</div>
</div>
<footer>bla bla</footer>
</div>
CSS
.moveDown {
left: 0;
margin: 0 auto;
padding: 0;
position: absolute;
right: 0;
top: 60px;
width: 100%;
z-index: -2;
-webkit-transition: top 300ms ease;
-moz-transition: top 300ms ease;
-o-transition: top 300ms ease;
-ms-transition: top 300ms ease;
transition: top 300ms ease;
}
You can't stick only with position:absolute, because absolute elements is positioned according to first parent relative element. You can fix at the bottom of some div, but it is static, so it can't move according to scroll. There is an excelent explanation at CSS-tricks where you can see this differentes.
See this example below:
html{
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html {
height: 100%;
}
.clearfix::after,
section::after,
header::after,
footer::after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.container {
min-height: 100%;
position: relative;
}
.navHorizontal {
height: 60px;
text-align: right;
background-color: #eee;
}
nav.navHorizontal a {
display: inline-block;
}
.content {
padding-bottom: 100px;
position: absolute;
top:60px;
width: 100%;
}
header img {
width: 100%;
height: 100px;
}
footer {
background-color: #ddd;
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
}
<div class="container">
<div class="navContainer">
<nav class="navHorizontal">
<section>
<div class="linkSection">
Home
Portfolio
Tutorials
Contact
</div>
</section>
</nav>
</div>
<div class="content clearfix">
<header>
<img src="http://placehold.it/200x100">
</header>
<div>
<h1>Some text here</h1>
</div>
<div>
Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
Phasellus fringilla posuere urna, ut porttitor nisi.
</div>
<div>
Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
Phasellus fringilla posuere urna, ut porttitor nisi.
</div>
<footer>Footer Content</footer>
</div>
</div>
For the sake of brevity, please consult this depiction of my template (your web browser might give you a false positive about that website), that fiddle made with a chunk of my code and a sample of my H.T.M.L. file.
<html>
<!--[…]-->
<body>
<!--[…]-->
<article>
<div class="latest_article_preview">
<img class="latest_article_thumbnail" src="16x9_ratioed_picture.jpg" width="222" height="124"></img>
<div class="latest_article_headline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="latest_article_lede">
Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehi
</div>
<div class="read_more">
Read more…
</div>
</div>
</article>
<!--[…]-->
</body>
</html>
Each latest_article_preview visually has three sub-divisions : latest_article_thumbnail, latest_article_headline and latest_article_lede. Technically, there is a fourth one (for now called "read_more") that shall visually replace latest_article_lede.
Wherever latest_article_preview gets hovered by the cursor, latest_article_lede shall be replaced by read_more.
Still, read_more is not a link to the article page as the entire latest_article_preview box is clickable (even before the to-be-animated transitions are over).
This has to be written in vanilla C.S.S., for I know two ways to do such an interaction :
The z-index transformation trick.
The content replacement.
I first tried the content replacement. As it terribly failed when I came to combine it with animations, I went to try the z-index transformation trick.
The reason I first avoided that trick is that I find it dirty. I still chose it anyhow. But I am bugging on something : how can I make the read_more flexible box take the exact same space as the latest_article_lede one ? I tried the C.S.S.'s Position property but the results were unsatisfying either (also, I remember absolute positioning being incompatible with animations).
I searched Google to know if I could base its size, positioning and alignment parameters on latest_article_lede's without finding any satisfying answer at all (despite being sure that the Flex property could help).
… After what I plan to add animations (mostly if not only fading effects), already having those. Animations that, as said earlier do not really go with the Content property.
Any samaritan to save me on this ? Help will be much appreciated.
A simple solution would be a combination of pointer-events and opacity:
section {
width: 200px;
border: 1px solid black;
}
section div {
min-height: 200px;
padding: 20px;
position: relative;
perspective: 1000px;
}
section div:after {
content: 'Read more...';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
line-height: 200px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: all .2s;
transform: translateZ(200px);
}
section div:hover:after {
opacity: 1;
transform: translateZ(0);
pointer-events: auto;
}
<section>
<h1>Headline</h1>
<div class="content">Lorem Ipsum Dolor sit Amet!</div>
</section>
I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle