I'm currently working on a blog layout and have hit a wall trying to figure out the best way to achieve the image alignment.
Each blog post has two images; a 'background' image set to .5 opacity and second 'top' image set to 1 opacity. The background image needs to sit under the top image.
So far I have got the layout to this point here http://dev.thefold.com.au/sandbox/staggered/portfolio-2-col.html but cannot figure out how to get the background image under the top image, leaving a 160px distance between the top image and the background image - in a way that can accommodate undetermined image heights. This html/css will eventually be used in a Wordpress theme so the solution needs to accommodate user added images that will have different heights.
An image of what I am trying to achieve is here http://dev.thefold.com.au/sandbox/staggered/reworked.png
Any ideas on how to do this?
Okay, see here:
.bk-effect {
position: relative;
display: inline-block;
font-size: 0;
line-height: 0;
}
.bk-effect img:first-child {
position: relative;
z-index: 10;
}
.bk-effect img:last-child {
opacity: 0.5;
position: absolute;
z-index: 5;
bottom: -160px; /* How much down of the original image */
right: -150px; /* How much right of the original image */
}
<div class="bk-effect">
<img src="https://placehold.it/400x300/000">
<img src="https://placehold.it/400x300/000">
</div>
To reuse it:
Copy the CSS over
Make a div with the class bk-effect
The first image used as the main image
The last image will be used as the background image
Currently, the images will be offset by 160px down and 150px to the right. You can change these values by altering the relevant line below.
Note: I added font-size: 0; line-height: 0; to remove any space under the image. This allows the offset to be exact, but it also means that no text will display inside the .bk-effect element.
For the link provided, change the code to:
.img-portfolio > a {
position: relative;
display: inline-block;
font-size: 0;
line-height: 0;
padding-right: 50px; /* How much right of the original image */
padding-bottom:160px; /* How much down of the original image */
width: 85%; /* Move the 85% to here */
}
.img-portfolio > a img:first-child {
position: relative;
z-index: 10;
box-sizing: content-box;
width: 100%; /* Remove the 85% here and move it up */
}
.img-portfolio > a img:last-child {
opacity: 0.5;
position: absolute;
z-index: 5;
bottom: 0;
right: 0;
box-sizing: content-box;
}
Note: You can't change the width of the main image, of the offset on the right side is going to be off. Instead, change the width of the a link.
Related
I'm going nuts! lol
I'm trying to position one image to the bottom of a page but it only works if the page is on large width...say 1360px, but when I shrink the with exactly to the 1206px and less, the body the image is pushed up creating a padding to the bottom as you can see in the image bellow (The image is represented by the green box).
The green image is positioned using this CSS:
body::after {
content: "";
width: 556px;
height: 767px;
position: absolute;
bottom: 0;
right: 10%;
display: block;
background-image: url("imagens/ghost-dog.png");
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
}
And also there is a transparency (this purplish shadow) I added using other property that don't sticky to the bottom too. Using this CSS:
body::before {
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
And last to make my mind go round and round there is a background to the body but it fits ALL screen as expected:
body {
color: #fff;
font-size: 15px;
line-height: 21px;
font-family: "comfortaa-regular";
background-color: var(--cor-roxa);
background-image: url("imagens/logo-bg.svg");
background-repeat: repeat;
}
html, body {
height: 100%;
}
I've already tried to position body relative, but it didn't solve the issue. I don't know if it matter but I'm using bootstrap and my divs are organized like the image below:
Any suggestions?
Without any example to review this is difficult to determine a cause. That said, what immediately comes to mind is a child element with a margin is overflowing it's parent container pushing the window boundary but not it's parent containers boundary.
I would inspect your elements and toggle any margins to see if this has any effect.
If you add your code to a fiddle I can take a look and update this if I notice the issue.
I need to place this white section over the image. I could not add the diagonal shape here, that's the main problem
You can use background with :before option CSS on your div.
Make awhite SVG with a diagonal. After, write CSS width this SVG in background and place a opacity .5 or .25.
Example :
#divText{
position: relative;
&:before{
position: absolute;
top: 0;
left: 0;
background: url('path/yoursvg.svg');
width: 100%;
height: 100%;
opacity: .5; /* Or .25 */
}
}
With that, it should work. ;)
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
I have the following code for a section on my website: http://jsfiddle.net/qda6bkze/
The problem is, I can't get it to be responsive. Ideally, I'd like for the orange box and the picture to align themselves so that the picture overlaps the orange box. Something like this: http://puu.sh/bMb8M.jpg
I know I'll have to use media queries, but I was wondering what changes to make in order for the image to align itself under the orange block, since right now it sits to the right no matter how big the browser window is.
Here's what i have for CSS now:
.home-feature4 {
position:relative;
max-width:1200px;
}
#boxy {
width:1200px;
height:790px;
}
.feature4text, .orangeblock, .orangephoto {
position: absolute;
text-align: center;
}
.feature4text {
z-index: 2;
color:#32719a;
font-family:"Scout", sans-serif;
text-transform:uppercase;
font-size:12pt;
top: 100px;
left: 120px;
width:425px;
}
.orangeblock {
z-index:1;
top: 280px;
left: 20px;
}
.orangephoto {
z-index: 3;
top: 0px;
left: 600px;
}
Take out the top and left properties and add float: left;
Like so:
.orangephoto {
z-index: 3;
float: left;
}
A reference for the float property (and others) from W3 Schools
You need to give your div an "ID" and place the image inside the div. I wrote some mark up for you below feel free to copy it and make adjustments for it to work on your site. Let me know if you have any further questions I would be happy to help.
/* Your can adjust the CSS however you see fit for your Project */
#orangeblock {
width:410px; /* Give your background block extra pixels needed for your border */
height:310px; /* Same with your height */
background-color:#CCC;
}
#orangeblock img {
width: 390px; /* your image size shouls always be smaller than your div size */
height: 290px; /* This will allow you to see the background image */
padding: 10px; /* Your padding will have to be adjusted to get the image where your want */
/* you can also use padding-left: padding-right: padding-top: padding-bottom: and place whatever pixels you like */
}
<html>
<head>
</head>
<body>
<div id="orangeblock">
<img src="https://cdn.shopify.com/s/files/1/0636/3475/files/home-ossection-04-photo.jpg">
</div>
</body>
</html>
I currently have a div called testLine used for displaying a color triangle effect using css:
#testLine {
width: 0;
height: 0;
padding-bottom: 47.5%;
padding-left: 47.5%;
overflow: hidden;
}
#testLine:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -1000px;
border-bottom: 1000px solid transparent;
border-left: 1000px solid #4679BD;
}
This works fine but the issue is the following:
How can I do to have a text over that triangle? I mean, I've tried with z-index but with no success (css it is not my strong point) and I didn't know if it is even possible to write text on it. What can be other possibilities? (I really don't want to use a resource consuming image for the background). I really appreciate any help that can lead me to a solution.
PrintScreen - http://i.imgur.com/dRCKVNO.jpg
edit, html code:
<div id="testLine"></div>
<div id="text">Testing Testing</div>
use position with alignment...something like:
#text {
position: absolute;
/* this will make div fall out of
page flow anad align to viewports dimension*/
top:0;
/* position to top*/
left:20px;
right:0
/*if needed*/
bottom:0
/*if needed*/
}
working demo
Use z-index with a position property, for example:
#testLine {
position: relative;
z-index: 9999;
}
Without position property z-index not work