coding rookie here. I have some overlays that displays some text upon hovering over an image. There are two things I'd like to change about their behaviour that I'm not clever enough to work out.
You can see them in action here
http://www.brightonyouthcentre.org.uk/skatepark
Firstly, at the moment the blue overlay's height is 20% of the image's height. If possible I'd like to make it so the height is relative to the amount of text there is, instead of a static size. No idea where to start with this bit.
Secondly, I don't want this behaviour on mobile, so I want to shift the overlay below the image and have it appear by default. At the moment it does this but doesn't seem to sit in the right place, and the method I've used causes some issues with the spacing between each image. Also I'm guessing if I fix issue 1, then my current attempt will go out the window. Any help with either of these would be appreciated!
CSS
.home-grid-block {
position: relative;
width: 100%;
}
.home-grid-header {
background-color:#e4a628;
text-align: center;
margin: 0 auto;
font-size:20px;
font-weight: bold;
padding:10px;
color:white;
}
.home-grid-image {
display: block;
width: 100%;
height: auto;
}
.home-grid-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.home-grid-block:hover .home-grid-overlay {
height: 20%;
padding-top:5px;
}
#media only screen and (max-width: 768px) {
.home-grid-overlay {
height: 20%;
margin-bottom:-20%;
padding-top:5px;
}
}
.home-grid-text {
color: white;
font-size: 16px;
margin:0 auto;
text-align: center;
}
HTML
<a href="http://www.brightonyouthcentre.org.uk/skatepark/skateboard-tuition/">
<div class="home-grid-block">
<div class="home-grid-header">Header above image</div>
<img class="home-grid-image" src="http://www.brightonyouthcentre.org.uk/skatepark/wp-content/uploads/sites/8/2018/07/summer-tuition-sq.jpg">
<div class="home-grid-overlay">
<div class="home-grid-text">This text will vary in length every time. </div>
</div>
</div>
</a>
**For auto height.**
.home-grid-block:hover .home-grid-overlay {
height: auto;
padding:25px;
}
**Mobile Fix New code**
#media only screen and (max-width: 768px) {
.home-grid-overlay {
height: auto;
position: relative;
padding:25px;
}
}
Related
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%)
}
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>
I've got a problem with my text when the browser is shrunk or on a mobile device. Here is a screenshot to help explain. On a larger screen the 'matched' text is on the same line as 'what is' so there is no problem. Below is the code I'm using at the minute. I would like the gap to be the same as the one below 'matched'. Thanks in advance.
HTML
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</P>
</div>
</div>
CSS
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}
You are using two paragraphs for the text, but semantically it is one paragraph:
<p>What is matched betting?</p>
This is also the root of your problem - you can solve it using two paragraphs by ensuring the line height and the margins/padding match - but using a single paragraph would be better.
Just add line-height: 1 on .text-wrapper div.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
line-height:1;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>
You written wrong html. please make it correct.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>
Click here for the Snapshot
Your issue is not reproducible from my end, check the above snapshot.
It may be caused because of some other styling in your css. Anyhow
please make text responsive.
Please include font-size: 100% for the body and use media query to target the screen where the text is overlapping
eg.,
#media only screen and (min-width: 320px) and (max-width: 535px){
//give font-size in percentage for text-wrapper p and if required include line-height as well
}
I'm sure this is an easy fix but I am new to HTML/CSS - I want a piece of text in a div to slide over another div which contains an image as well as text. Currently the slider div is not covering the entire div as the background text is preventing it from doing that. How do I make it completely overlap?
Here is my code:
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br> I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider"> Sliding info. </div>
</div>
Add this to your .items-tall-slider:
position:absolute;
top:0;
and this for positioning:
.row {
position:relative;
}
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
position:absolute;
top:0;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
.row {
position:relative;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br>
I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider">
Sliding info.
</div>
</div>
</div>
You also missed one </div> closing tag. I've added that in this example.
In your example the easiest solution would be to add position: absolute; top: 0 to the .items-tall-slider. This has the potential undesired side effect though, that the slider doesn't take any space anymore. Therefore any other elements in your page could be overlapped by your slider as well.
If you don't want this side effect, you could add a negative margin to your slider like this (or in the example below) and therfore overlap your text:
.items-tall-slider {
margin-top: -40px;
}
.items-tall-slider {
margin-top: -40px;
}
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br> I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider"> Sliding info. </div>
</div>
I am trying to create a grid style portfolio page in which the title highlights when hovered over. I would like also a background color to show over the image as well. I have created both of these but can't figure out how to have them happen at the same time. Below is the HTML and CSS as well as the link to see what I mean in action.
.home_blog_box { position: relative; float: left; width: 287px; padding: 0 12px 12px 0; }
.home_blog_box img { width: 287px; height: 201px; }
.home_blog_box h3 { position:absolute; width: 287px; height: 201px; bottom:3px; left:0px;}
.home_blog_box h3:hover {background-color: #777777; opacity:.85;}
.home_blog_box h3 a {opacity:0; color:#ffffff; text-decoration: none; font-size:30px;}
.home_blog_box h3 a:hover {opacity:1}
<div class="home_blog_box">
<?php } ?>
<?php the_post_thumbnail('featured-blog'); ?>
<h3><?php the_title(); ?></h3>
</div><!--//home_blog_box-->
Thanks!
You can do this nicely with the :after or :before pseudo elements: http://jsfiddle.net/TpfA8/
example:
<div class="image-box">
<img src="http://placehold.it/200x150" />
<p>title</p>
</div>
and relevant css:
.image-box {
position: relative;
overflow: hidden;
width: 200px;
}
.image-box:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(200,100,100, 0.5);
}
.image-box p {
display: none;
}
.image-box:hover p {
display: block;
position: absolute;
top: 10px;
left; 10px;
}
Using CSS-generated content, you're creating a box around around the content of '' (nothing) but this element still adheres to the box model (sort of) so it can get things like height, width, position, etc.
Make sure to specify width for your image container so you can use the overflow: hidden; property.