Background
I needed some basic text over image for my website.I have done so by first giving a transparent black box using rgb and rgba functions.Then placed text over it by declaring image as "relative" and text as "absolute".
Problem
When I resize the browser,the text runs out of image in downward direction.
It is shown in https://jsfiddle.net/Lheg26kw/
Here is html-
<div class="hero-container">
<div class="hero-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
<div class="hero-text">
<p>This is text<br>
<span>this is some more text for trial of this problem</span></p>
</div>
</div>
</div>
Here is CSS:
.hero-image{
position: relative;
width: 100%;
}
.hero-text p{
position: absolute;
text-align: center;
bottom: 0px;
top: 0px;
width: 100%;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding-top: 80px;
color: white;
font-weight: bolder;
}
.hero-text span{
font-weight: normal;
}
Need
I need the text to stay on image after resizing to minimum amount i.e. if website is accessed through a mobile.
You could clone the content to another div below the hero and then hide the .hero-text
$(window).on('resize', function() {
var $mobileContent = $('.mobile-content');
var $bodyWidth = $('body').width();
if ($bodyWidth < 620) {
var $innerHero = $('.hero-text').html();
$mobileContent.html($innerHero);
} else {
$mobileContent.empty();
}
}).trigger('resize');
body {margin: 0;}
.hero-image {
position: relative;
width: 100%;
}
.hero-text p {
position: absolute;
text-align: center;
bottom: 0px;
top: 0px;
width: 100%;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.4);
padding-top: 80px;
color: white;
font-weight: bolder;
}
.hero-text span {
font-weight: normal;
}
.mobile-content {
color: #000;
font-weight: 700;
text-align: center;
}
#media(max-width: 620px) {
.hero-text {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="hero-container">
<div class="hero-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
<div class="hero-text">
<p>This is text
<br>
<span>this is some more text for trial of this problem</span>
</p>
</div>
</div>
</div>
<div class="mobile-content"></div>
If you don't put a minimum size on the image then eventually the text won't fit no matter what. But one thing I'd suggest is changing your padding-top: 80px; from a constant value of 80px to a percentage like padding-top: 25%;. This will help it scale better as the image changes in size.
This will work: (replace your css with these)
.hero-image{
position: relative;
width: 100%;
}
.hero-image img{
width:100%;
display:block;
}
.hero-text{
width:100%;
height:100%;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
position: absolute;
top:0;
left:0;
}
.hero-text p{
position: absolute;
text-align: center;
top: 50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
width:100%;
padding: 5px 0;
margin:0;
color: white;
font-weight: bolder;
}
.hero-text span{
font-weight: normal;
}
Related
I'm working on an accordion. I've used jQuery for the animation. When I click on the accordion head the border that holds the + reduces in size. I only want the plus sign to change and the border to stay the same size.
$(document).ready(function() {
//toggle the component with class accordion_body
$(".accordion_head").click(function() {
$(this).removeClass('coll-back');
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(400);
$("plusminus").text('+');
$(this).removeClass('coll-back');
$('.rmv-cls').removeClass('coll-back');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(400);
$(this).children("plusminus").text('+');
$(this).removeClass('coll-back');
} else {
$(this).next(".accordion_body").slideDown(400);
$(this).children("plusminus").text('');
$(this).children("plusminus").append('<hr class="hr-clc">');
$(this).toggleClass('coll-back');
$(this).addClass('rmv-cls');
}
});
});
$('plusminus').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
}
#plus-1 {
position: relative;
top: 5px;
left: -27%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
<div class="acc-main">
<div class="container">
<div class="kind">
<div class="accordion_container">
<div class="accordion-main">
<div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
</div>
<div class="accordion_body" id="a1" style="display: none;">
<p class="para-acc">
</p>
</div>
</div>
</section>
The font used has its characters with different width, that is the characters + and - have different width. So when they switch, it affects the total width of the block.
You can solve it using a monospaced font, such as Monospace, Courier, Courier New or Lucida Console.
Another solution would be set a fixed width for the block.
First, the <span> must be an block element. You add to it display: inline-block. Then padding will be considered within total width as default, so you have 25px padding for left and right. Your block is about 72px (when +), then you can add width: 22px (50px + 22px = 72px fixed width).
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
display: inline-block; /* add this */
width: 22px; /* add this */
}
A little bit the height of the accordion head will change with that, but nothing big.
Add the following css code
.plusminus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
You have already added .active class to .plusmimus class on click of the accordion. I have added some extra CSS code to make it look better as you required.
$(document).ready(function() {
$('.plusminus').on("click", function() {
$(this).toggleClass('active');
});
});
.plusminus {
display: inline-block;
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 30px;
cursor: pointer;
position: relative;
}
.plusminus::before,
.plusminus::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #FFF;
transition: 0.15s ease-out all;
}
.plusminus::after {
width: 2px;
height: 16px;
}
.plusminus.active::before {
transform: rotate(180deg);
}
.plusminus.active::after {
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>
Please let me know if this helps.
I'm making a movie-page where I want to make the photos in the moviecards darker while hovering on it but when I add opacity, the text (that I want to be white) also gets darker. How can I make the photo background to be darker without making the text dark?
This is my code:
(CSS)
h1 {
display: none;
color: #fff;
}
p {
display: none;
}
h2 {
color: #fff;
}
p.movieOverview {
color: #fff;
display: flex;
max-width: 400px;
}
.movieCard {
display: flex;
flex-direction: column;
position: relative;
border-style: solid;
border-color: black;
border-width: 3px;
}
.movieCard:hover {
background: 0, 0, 0, .75;
opacity: 0.5;
z-index: 1;
position: relative;
color: #fff;
}
.movieCard:hover p {
display: unset;
padding: 15px;
color: #fff;
opacity: unset;
font-size: 1vw; /*vw gör font-size responsiv*/
position: absolute;
/*started with top:-10 to get the text in right square, apparently I didnt need it*/
left: 15px;
bottom: 15px;
z-index: 2;
}
.movieCard:hover h1 {
display: unset;
padding: 15px;
color: #fff;
opacity: unset;
font-size: 3vw; /*vw gör font-size responsiv*/
position: absolute;
/*started with top:-10 to get the text in right square, apparently I didnt need it*/
left: 15px;
bottom: 30px;
z-index: 2;
}
(react javascript)
<div className="movieList">
{movie.map((movie) => (
<Link key={movie.id} to={`/movies/${movie.id}`}>
<div className="movieCard">
<img className="cardImage" src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt=""/>
<div textContainer>
<h1>{movie.title}</h1>
<p className="releaseDate">Released {movie.release_date}</p>
</div>
</div>
</Link>
))}
</div>
</section>
```
The opacity property affects the children elements of the targeted element too so what you can do is just apply the opacity directly to the image inside your movie card instead like this:
.movieCard:hover img {
opacity: 0.5;
}
Check and run the following Code Snippet for a practical example of the above approach:
#someDiv:hover img {
opacity: 0.5;
}
<div id="someDiv">
<img src="https://picsum.photos/200/200" alt="someImg">
<p>Some text</p>
</div>
So the hover works perfectly fine on chrome but when I look at it in safari the div that shows up on hover is displayed directly to the right of the div it should be on top of. Not sure why this isn't working properly in all browsers? Any help would be great!
Here is the HTML:
<div class="appdesign">
<img class="appmockup" src="img.jpg"/>
<div class="apptext" style="display:none">
<p class="apptexttitle">Name</p>
<p class="apptextinfo">Mobile App Design<br><br>Insert info</p>
<button>
View Project
</button>
</div>
</div>
Here is the CSS
.appdesign{
display: inline-flex;
img{
height: 450px;
width: 650px;
margin-bottom: 30px;
}
.appdesign img:hover .apptext{
opacity: 0.5;
}
.apptext{
display: block;
opacity: 0.8;
position: absolute;
background-color: $customgrey;
height: 450px;
width: 650px;
margin-bottom: 30px;
z-index: 100;
.apptexttitle{
color: $white;
font-size: 30px;
border-bottom: 2px solid $white;
border-top: 2px solid $white;
width: 15vw;
padding: 10px;
text-align: center;
}
}
.apptextinfo{
width: 40vw;
font-size: 18px;
font-family: Merriweather;
}
}
Here is the JS
<script>
$('.appdesign').hover(function(){
$(this).find('.apptext').fadeIn('slow');
},
function(){
$(this).find('.apptext').stop().fadeOut('slow');
});
</script>
I want to absolutely position my buckles for animation and this is my html:
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who"><span id="whospan"><B>LOREMSIT.DOLOR</B></span></div>
<div id="what"><div id="klamra_l">[</div><div id="klamra_r">]</div><span id="whatspan">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
I am using for it jQuery:
function ustawklamry()
{
var w_what = parseInt($("#what").outerWidth(true));
var w_whatspan = parseInt($("#whatspan").outerWidth(true));
var left = parseInt((w_what - w_whatspan)/2);
var right = parseInt(left + w_whatspan);
$("#klamra_l").css("left",left);
$("#klamra_r").css("left",right);
console.log(w_what + ";" + w_whatspan + ";" + left + ";" + right);
}
ustawklamry();
And what I get is:
And in console I see:
964;596;184;780
What is more, the space between buckles is equal to #whatspan (green field).
I have no idea why it is not working. I tried width, outerWidth, innerWidth and no one is working.
Please for help, if you want any additional data - ask.
First, I will address your following problem.
Oh my god, I see it is working good on fiddle but on my website not... I thought about problem while page is loading and I used $(document).ready(function(){... but it is not working too. Where is the problem?
This is because code from other parts of the page are be interfering with your code for this part of the page. If you can't find it anywhere in your javascript, then it must be in your CSS. Try opening up the dev tools (inspecting the page) and see what CSS values that menu is inheriting from its parent element in your production page. Then, try inspecting the JSfiddle page. Finally, try to get the CSS inherited from the parent element on the production page to be the same as the CSS inherited from the parent element on the JSFiddle page. Now it should work. Also, pay very close attention to !important tags. I have a sneaking suspicion that they might be the culprit.
To the next issue: you don't actually need javascript. Also, your layout is inflexible, it will look good on some devices, and bad on others because you don't make the size adaptive to the user's screen size. Here is a demo that works in IE9 and automatically resizes based on the user's screen size by using vw units in the font size, and transform: translateY(.125em) to center the brackets. Also, you could cut down on your DOM usage. Considering all these things, I hope you find this very useful:
#about {
border: 2vw solid #FFF;
padding: 3vw;
//border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link
To add some snazzy roundness to it, all you need is 1 extra line of code.
#about {
border: 2vw solid #FFF;
padding: 3vw;
border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link
I want to make a title overlay an image. That's easy, but I want it to be a certain width, and have the text in blocks. Here's an image of what I want:
I'd like to do this in CSS if possible, but I'm fine with using Javascript.
See a live example here. Try this:
HTML:
<div>
<span>Hello world</span><br>
<span>More text here</span>
</div>
CSS:
div {
width: 400px;
height: 400px;
background-image: url(http://www.hotels.tv/london-hotels/images/destinations/1/w97654_8.jpg);
background-repeat: no-repeat;
background-image-width: 100%;
}
div span {
font-size: 30px;
position: relative;
top: 100px;
background-color: gray;
color: white;
}
EDIT
In this example, the text is aligned to the bottom by using display: table-cell and vertical-align: bottom on the parent
EDIT 2
For a transparent background, use rgba(), as in this example
EDIT 3
To align the text right, set text-align: right on the parent, as in this example
Might need a little tweaking to get it exactly how you want to look but here's a starting point.
<style>
#image_container {
position: relative;
background-image: url(path/to/image) no-repeat;
width: 500px;
height: 500px;
}
#image_container .title {
position: absolute;
top: 300px;
background: #000;
background: rgba(0,0,0,0.75);
color: white;
font-size: 30px;
font-weight: bold;
}
</style>
<div id="image_container">
<div class="title">
<p>Some Text</p>
</div>
</div>
jsFiddle demo
HTML:
<div id="background">
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</div>
CSS:
#background {
background: url(http://css-tricks.com/examples/TypeOverImage/images/3754004820_91a5c238a0.jpg) no-repeat;
width: 400px;
height: 300px;
}
span {
position:relative;
clear:both;
float:left;
color:#fff;
font-size:23px;
font-weight:bold;
top:150px;
margin-top:-2px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 15px;
}
This might get you started: http://jsfiddle.net/FyL6J/
There is no reason why this has to be done using jQuery, but I find .position() to be helpful.
Something like this? http://jsfiddle.net/EcXZZ/
The first and simplest way I see to do so would be to get a png image with desired opacity, by example a 1x1 RGB(0,0,0) pixel with 40% opacity for the title background and set your CSS this way :
<style>
.image_holder
{
position: absolute;
left: 10px;
top: 10px;
}
.image_holder > img
{
position: absolute;
left: 0;
top: 0;
}
.image_title_overlay
{
position: absolute;
left: 0;
top: 120px;
background-image: url('images/black.40%opacity.1x1.png');
color: 'white';
padding: 10px 12px;
}
</style>
<div class="image_holder">
<img src="image_url.jpg"/>
<p class="image_title_overlay">A Movie in the Park: <br/>Kung Fu Panda</p>
</div>
I would use rgba... basically like this:
span {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 17px;
}
http://jsfiddle.net/TCtR5/3/