Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
<style type="text/css">
#star12 {
background: blue;
width: 80px;
height: 80px;
position: relative;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: blue;
}
#star12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#star12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
</style>
<div id="star12" >
</div>
This code for a star type div. It outputs a star div. I want to dispalay an image inside this star div. Is it possible? please help me friends.
I need to display an image in a div in a variety format.
I'm not sure that's what's causing this but I think transformed elements become higher on the document (z index gets bigger) than their descendants as well - which is where a manual z-index would come in handy for the image itself. An arbitrary number should suffice, I find that 10 worked in this case; also keep in mind that in order to use z-index, position must be relative or absolute (instead of the default static).
So if you want an image inside that star just put an <img /> element and give it a position:relative; z-index: 10.
HTML:
<div id="star12" >
<img src="http://www.wallpixy.com/wp-content/uploads/boy-nature-animated-beatiful-samsung-galaxy-note-wallpapers.jpg" />
</div>
CSS:
#star12 img {
width: 60px;
height: 60px;
position:relative;
z-index: 100;
margin-top: 10px;
margin-left: 10px;
}
JS fiddle
Just add an <img /> inside <div id="star12">
<div id="star12" >
<img src="http://www.fastcocreate.com/multisite_files/cocreate/imagecache/slideshow-large/slideshow/2013/01/1682345-slide-slide-1-biz-stone-explains-how-he-turned-91-random-photos-into-a-movie.jpg" />
</div>
And apply appropriate css to the img,
img{
width: 60px;
height: 60px;
position: absolute;
z-index: 100;
top: 10px;
left: 10px;
}
Test Link
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
He everyone i am strugling to find a css that will work to get a overlay on my feautured image so you can see my title more clear. For the site www.quinstudio.nl/gallery. Any idea how i can get this to work?
? {
background: #000;
opacity: .1;
}
There are several ways you could approach this. There's no real difference in how they'll turn out; you can use whichever works better with the markup you have. The first option is a little simpler because there's no empty div being added as a color overlay.
Option 1: Make the colored background opaque, and the image partially transparent.
.image-wrapper {
display: inline-block;
background: #0cd;
/* You need this line for the centered h1 below to work. */
position: relative;
}
.image-wrapper img {
opacity: 0.5;
display: block;
}
.image-wrapper h1 {
/* Here's a trick for centering your title, if you want. */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
color: #fff;
}
<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitten">
<h1>Kitty!</h1>
</div>
Option 2: Make the image opaque, and put a partially transparent overlay on top of it.
.image-wrapper {
display: inline-block;
position: relative;
}
.image-wrapper img {
display: block;
}
.image-overlay {
background: #000;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2; /* puts this div 'in front' of the image */
}
.image-wrapper h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 3; /* puts the text in front of the dark overlay */
}
<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitty!">
<div class="image-overlay"></div>
<h1>Kitty?</h1>
</div>
While #jack's answer is good, I'd like to share an alternative one that doesn't use an <img> element and instead uses the :after pseudo-element.
This allows you to use the CSS background image on the container and essentially add a fake element that has the color overlay on it:
.container {
background: url(https://loremflickr.com/320/240);
width: 320px;
height: 240px;
position: relative;
}
.overlay > * {
z-index: 1;
position: relative;
color: #fff;
}
.overlay:after {
content: "";
background: #0095ee;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .65;
}
<div class="overlay container">
<h1>Title</h1>
</div>
Edit:
Your situation is a little different. You can just lower the opacity of the image and add a black background to it's parent container. Try the following:
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image img {
opacity: .75;
}
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image {
background: #000;
}
It will lower the opacity of the image (which will make it look "whiter", so we can add a black (or whatever color you want) background to it's parent container to compensate and darken it instead.
I have a centered form on my page positioned using top and left values and css3 transformations.
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/** backface-visibility: hidden; **/
}
h1 {
padding-bottom: 5px;
border-bottom: 3px solid blue
}
Notice backface-visibility. When set to hidden, all problems are solved for me using chrome 42. It doesn't render blurry. For others however using the same chrome version, it renders blurry with it.
Here's what it looks like without BV: http://jsfiddle.net/mzws2fnp/
To you it may be blurry, to others it may not.
Here's what it looks like with BV: http://jsfiddle.net/mzws2fnp/2/
For some reason people see the border blurry however I do not. I know backface-visibility: hidden is meant to fix that, and it does for me, just not for others using the same browser as I. Strange.
Try -50.1%
transform: translateY(-50%) translateX(-50.1%);
EDIT:
I have found out, they are blurred when chrome dev tools are opened, try to close them and refresh
This is a bug in Google Chrome. I reported this issue to Google:
Rendering bug in css transform: it blurrs borders
<div class="middle">
<input type="text" />
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
input {
border: 1px solid black;
border-radius: 4px;
}
var middle = document.querySelector('.middle');
setInterval(function(){
middle.style.paddingTop = middle.style.paddingTop === "0px" ? "1px" : "0px";
}, 1000);
Animated bug demonstration
When you use percentage, will play an odd number. will blurry borders,
using parseInt to assign the value is integer.
$(document).ready(function(){
$('.middle').css({
'top':parseInt($('.middle').position().top)+ 'px',
'left': parseInt($('.middle').position().left)+'px',
'transform':'none',
'-webkit-transform':'none'
});
});
.middle {
position: absolute;
top: 30%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
.middle2 {
position: absolute;
top: 70%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
<div class="middle2">
<h1>This is blurry, or should be.</h1>
</div>
In this specific case where you're using a solid border, you can try using a box-shadow instead of a border as a workaround. For example, replace: border-bottom: 3px solid blue; with box-shadow: 0px 3px 0px blue;
Use even number (2px or 4px) for the border. Odd number (3px or 5px) is giving that blur.
border-bottom: 4px solid blue;
there is little hack that can help to get any block as center middle.
in parent <div> where we add position: relative add below properties,
display: flex;
justify-content: center;
now add align-self: center; property with the block which we want to make center middle make sure that this block is absolute position.
Because translated element height is odd number. This will not occur when element height is even number.
This problem occurs when we add
transform: translateY(-50%) translateX(-50%);
OR
transform: translate(-50%, -50%);
it is still as an open issue in chromium bugs list.
I'm trying to make a responsive, full width image work inside a narrow parent. So far, I can't clear these elements.
Javascript is ok, but fussing with the HTML isn't since it should work in a WordPress theme.
HTML:
<p>Visible content.</p>
<div class="feat-img">
<a href="#">
<img src="http://f.cl.ly/items/1e1515393T2l0D3I2503/feat-img.jpg"/>
</a>
</div>
<p>Hidden content :( </p>
</article>
CSS:
.feat-img img{
position: absolute;
width: 100% !important;
min-width: 400px;
min-height: auto;
height: auto;}
.feat-img img:empty{
left: 50%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}
article{
width: 50%;
margin: auto;
background:#ccc;}
Live: http://jsfiddle.net/wzvLa/4/
I think it can not be don only with css, because when you set position: absolute to img it's parent no longer contain it. You can write a little javascript code to do that:
$('.feat-img').css({ height: $('.feat-img img').height() });
This way you set the height of .feat-im to be the same as the image in it. Don't forget to do it on $(window).resize() too, so it can be responsive.
Here is what I do: jsfiddle
Here's one way of doing it:
html,body { margin: 0; }
.feat-img img {
position: relative;
width: 133.33%; /* (100% divided by article width) */
min-width: 400px;
height: auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
article {
width: 75%;
margin: auto;
background: #ccc;
}
(jsfiddle demo)
I'm trying to split a page into different shapes, as shown in this image:
The problem is I'm trying to create divs as the shapes in the image so I can put content in them and by changing the css styles change their colors and give them effects with JavaScript,
Searching the net I did come across some sites like CSS Tricks to create CSS Triangles, but that's not exactly what I want because I cant put content in such a div and cant get exactly the shapes I need, I was thinking maybe I could get such results with the element, but i don't really know if its logical to use instead of and can get the effect I want?
is there a way to divide an Html page into any desired shape?
hmm, you can use css3 transformations (rotation):
HTML:
<div class="shape1">
<div class="shape1-content"> ... </div>
</div>
CSS :
.shape1 {
-webkit-transform: rotate(45deg);
}
.shape1-content {
-webkit-transform: rotate(-45deg);
}
Of course, you shoud apply other styles (position: absolute, and others).
UPDATE:
copy'n'paste this code to see live example:
<html>
<head>
<style>
.wrapper {
border: 1px solid #ff8888;
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
overflow: hidden;
position: absolute;
top: 50%;
width: 640px;
}
.shape1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid black;
height: 50%;
left: -25%;
position: absolute;
top: 70%;
width: 150%;
}
.shape1-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
padding-left: 230px;
}
.shape2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid #88ff88;
bottom: 244px;
height: 100%;
position: absolute;
right: 50%;
width: 100%;
}
.shape2-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
bottom: 10px;
position: absolute;
right: 10px;
}
.shape3 {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
border: 1px solid #8888ff;
bottom: 40%;
height: 100%;
position: absolute;
right: 20%;
width: 100%;
}
.shape3-content {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
bottom: 50%;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="shape3">
<div class="shape3-content">Hi there!</div>
</div>
<div class="shape1">
<div class="shape1-content">Hi there!</div>
</div>
<div class="shape2">
<div class="shape2-content">Hi there!</div>
</div>
</div>
</body>
</html>
In general you can't do that with CSS until the CSS Shapes and Exclusions stuff mentioned here gets added to browsers in a few years http://corlan.org/2012/03/16/css-bleeding-edge-features/
For now basic CSS3 will allow you to create shapes and rotate them, but not with much precision. Your best bet may be to use to use SVG.
Here's an example of using SVG to make a puzzle out of an existing image:
http://lavadip.com/experiments/jigsaw/
A lot more information can be found here:
https://developer.mozilla.org/en-US/docs/SVG/Tutorial
As mentioned earlier you can use a library like http://raphaeljs.com/ to help with creating your SVG graphics.
A warning though it might be a pain in the backside to do :-p
I am looking to vertically center a <div> in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only). I have several constraints:
The div must be centered vertically in the viewport. Methods I have seen only support centering inside another <div>, which is not what I want.
The height of the div is not known.
Other constraints:
The div must be aligned to the right.
The div has a constant width.
The div must support padding.
Other elements will be placed on the web page. The div acts as a menu.
The div must support a background colour/image.
This gets me close to what I want, but not exactly:
#nav {
position: fixed;
right: 0;
top: 50%;
}
However, the top of the nav is in the middle, not the middle of the nav.
Is there some technique which allows me to center my div with these constraints?
What's that? Taking 8 years to get the answer to a problem is too much?
Well, better late than never!
You got really close to the solution. I'd do it with transform: translate():
#nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
According to Can I use?, it is supported by everything except for IE8- and Opera Mini (which, to be honest, is a pretty good support).
I'd recommend you overkill it a bit and just add all of the vendor prefixes (just to make sure!):
#nav {
position: fixed;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's a snippet to show it to you in action:
#nav {
right: 0;
top: 50%;
position: fixed;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #ccc;
padding: 20px;
}
<div id="nav">
ABC<br/>
DEFGH<br/>
IJKLMNO<br/>
PQRS<br/>
TUVWXYZ
</div>
Hopefully it's still relevant to you! (who am I kidding, it's been 8 years)
you can use this as one of the solution.
<style>
#containter {
height: 100vh; //vh - viewport height
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#content {}
</style>
<div id="containter">
<div id="content">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
If the item is set to position: fixed or position: absolute:
top: 50%; left: 50%; transform: translate(-50%, -50%)
If the item is set to position: relative, use:
margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%)
(More info at the source.)
Example:
Run the snippet and then resize this page (or rotate device). The box stays centered in the "snippet viewport".
.myContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid RebeccaPurple;
}
.myThing {
width: 100px;
height: 100px;
background-color: CornflowerBlue;
}
<div class="myContainer">
<div class="myThing myContents">
</div>
</div>
The easiest way is not to use a div - use a table with one row and one cell. Vertical alignment is woefully unsupported in CSS and you will find yourself coding up the wall and across the ceiling to accomplish it.
I understand the semantic argument against what I have just proposed - I am a proponent of semantic markup in most cases. However I also believe in using the right tool for the right job. I believe it is best to sacrifice a little purity in this case for a simple solution that will work.