I am making a symmetri webpage for my project. I used halve image and want its symmetry counterpart two also show on hovering. I mean that when we will hover on container, the image will get completed to reveal the full image. How do I achieve this.
#container {
height: 300px;
width: 241px;
border: 1px solid red;
}
img {
height: 300px;
width: 120px;
border-right: 1px dotted gray;
display:inline-block;
float:left;
}
<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
<img src="http://i.imgur.com/qIPYs5i.jpg">
</div>
You can make a second class with the :hover keyword and set the background-image property to the complete image there.
Something like
#container:hover {
height: 300px;
width: 241px;
border: 1px solid red;
background-image: url('Your Image url')
}
should do the trick.
You can use css3 transforms to mirror that image and then use the :hover pseudoclass to reveal it when the user hovers over the container:
#container {
height: 300px;
width: 242px;
border: 1px solid red;
}
#container:hover .second{
display: block;
}
img {
height: 300px;
width: 120px;
border-right: 1px dotted gray;
display: block;
float:left;
}
.second {
transform: scale(-1, 1);
display: none;
}
<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
<img class="first" src="http://i.imgur.com/qIPYs5i.jpg">
<img class="second" src="http://i.imgur.com/qIPYs5i.jpg">
</div>
Related
Here is a simple code I'm testing
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Fiddle: https://jsfiddle.net/xhsngt3q/
On one monitor I get this
On the other one there's a white pixel border on the right and bottom
Any tips on how to remove that?
I think it is caused because of the number of pixels of the image.
I would suggest to add a black background to your image like the following CSS code:
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
/*My change*/
background-color: black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Hope this could be useful. Greetings.
You can also try with max-width:199px or max-width:202px
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
/*My change*/
max-width: 199px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Add box-shadow 0 0 0 1px; instead of the solid border. It is just a work around but sometimes good enough.
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 4px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
I am trying to center-align an image in a page while also turning the image into a clickable link. Here is my attempt:
a {
background: lightblue;
border: thin solid blue;
}
img {
background: lightgreen;
border: thin solid green;
display: block;
width: 25%;
margin: 0 auto;
}
<img src="http://placekitten.com/500/500" alt="kitten">
While the image has become a link, the problem is that most of the horizontal space on both sides of the image has also become clickable link. Why does it happen? Is there anyway to prevent that, so that only the image is a clickable link?
I can only think of using a div to centre the image link.
a {
background: lightblue;
border: thin solid blue;
}
img {
background: lightgreen;
border: thin solid green;
width: 25%;
}
.center {
margin: 0 auto;
text-align: center;
}
<div class="center">
<img src="http://placekitten.com/500/500" alt="kitten">
</div>
How suggest #yinsweet use container, i use other method with just text align on container like that:
a {
background: lightblue;
border: thin solid blue;
}
img {
background: lightgreen;
border: thin solid green;
display: inline-block;
width: 25%;
margin: 0 auto;
}
.container{
text-align:center;
}
<div class="container">
<img src="http://placekitten.com/500/500" alt="kitten">
</div>
I am trying to make a small yellow square of 300x300 pixels let's say with a black border. I use:
<style>
body {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
</style>
But this gives the whole page yellow and not just the square... How can I fix this? Ty
The body tag selects the entire body of the html document. You need to give your box a id or class and then apply the CSS to that.
For example:
#box {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
<div id="box"></div>
You've applied to the body, that basically means the whole page.
Insert a DIV on the body.
HTML
<div class="div-class"></div>
CSS
.div-class{
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
If you want only a square of 300x300 you need to make a div for that
**HTML:**
<div class='square'></div>
**CSS**
.square {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
Now you are applying your style to the body (whole page). That's why your whole window is yellow instead of 300x300
You need to apply the styles to a div and not to the entire body...
.square {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
<div class="square"></div>
Don't use "body", use "div"
div {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}
Fiddle: https://jsfiddle.net/Lrgqp2ud/
So I got this fiddle: http://jsfiddle.net/69WVx/3/
I have also attached the code. Basically, I want test2 and test3 to be inline with one another. I also want the widths of test2 and test3 to be %, as it's for a mobile responsive button.
Can this be done the way I'm doing it? Or am I screwing this all up?
As you can see, the DIV's test2 and test3 collapse on top of one another, as opposed to being inline.
HTML:
<div class="test">
<div class="test1">
<div class="test2">ORANGE</div>
<div class="test3">APPLE</div>
</div>
</div>
CSS:
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline;
position: absolute;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline;
position: absolute;
}
Try something like this , Trying my best to help .
Don't know if this is what you want. Fiddle
If you want to keep position absolute do the following
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
position :absolute;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
position :absolute;
margin-left:40%;
}
Or Even this will do
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
}
Apply display: inline-block; for the inner blocks such as .test2 and .test3, so that you can achieve this..
Check this Fiddle...
CSS:
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
}
Try this:
Demo
Your mistake is:
1.You let .test2&.test3 position:absolute,this will cause them to be deleted from the normal flow.If you don't define the top,left,right,bottom of the elements,they will cover each other of course.However,you don't have the need to use "position" here.
2.Div should be displayed inline-block. Inline elements do not have width or height properties.So you can see though you let the divs width:40% ,it doesn't work. Let them display:inline-block;
Well here is what i tried i guess this is what u want ...
HTML :
<div class="test">
<div class="test1">
<div class="test2">ORANGE</div>
<div class="test3">APPLE</div>
</div>
</div>
CSS :
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
position: relative;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
position: relative;
}
here is the fiddle ----> DEMO
Well the reason why it overlapped was because you have positioned it absolute ...... either give relative positioning or provide the positioning for an absolute layout in order to get what you wanted ....
The position:absolute properties in your CSS were causing both .test2 and .test3 to display on top of one another. Removing that property from both elements provides the inline appearance you're looking for.
Also, as Jc. points out below, the display properties should be set to inline-block instead of inline
.test2 {
width: 60%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 30%;
border: 1px solid;
display: inline-block;
}
http://jsfiddle.net/69WVx/11/
I have this code:
<header>
<div id="logo">
<img src="img.png" width="288px" height="80px"/>
</div>
</header>
And this CSS:
header { width: 960px; height: 100px; padding: 10px; }
#logo { float: left; height: 100%; border: 1px solid #000; }
#logo img { border: 1px solid #000; }
How to centralize vertically the img element in this div? I have use the display table, and table cell, but not work.
#logo { height: 100%; border: 1px solid #000; text-align:center; }
-------^^^^^^^^^^^^^^^^^^---
also remove the float
Live Demo
Use this tag text-align: center ; from the CSS for the image to the CSS for its parent div, so your CSS looks like this:
.box {
height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align:center
}
.box img {
height: 100%;
width: auto;
}
Just Replace Your CSS like this.
http://jsfiddle.net/lvtrvd/29uGQ/
header { width: 400px; height: 100px; padding: 10px; }
#logomark { height: 100%; border: 1px solid #000;position: relative;}
#logomark img { border: 1px solid #000; position: absolute;top:0;
bottom:0;left:0;right:0; margin:auto;}