Hey guys I got an image which is half faded out and when you hover over it, it will fade into the screen. I also have a box which i made so when you hover over that it will change color. However the problem is if i make the box go around the image the only thing that works is the box changing color, so its overlapping the other image. Anyway to fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>
<style>
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px;
top: -550px;
left: 740px;
}
.meh:hover
{
opacity:1.2;
filter:alpha(opacity=100);
}
.border
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
text-align:center;
top: -650px;
}
.border:hover
{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="meh">
<img src="http://lorempixel.com/50/50" alt="meh">
</div>
<div class="border">
</div>
</body>
</html>
Why is there top: -550px; values are given??
I have removed those values here.
Method - 1 (to get the hover effect for the entire divs)
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px;
}
.meh:hover
{
opacity:1.2;
filter:alpha(opacity=100);
}
.border
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
text-align:center;
}
.border:hover
{
border: 1px solid red;
}
DEMO
Method - 2 (To give separate hover effect for both the div )
Just add display:inline to .meh
.meh
{
position: relative;
opacity:0.5;
filter:alpha(opacity=40);
width: 200px;
height: 200px; display:inline
}
DEMO
Let me try...
<style>
.meh
{
z-index: 500;
width: 200px;
height: 200px;
text-align: center;
}
.meh img {
margin-top: 50px;
opacity:0.5;
filter:alpha(opacity=40);
}
.meh img:hover {
opacity:1.2;
filter:alpha(opacity=100);
}
.border {
z-index: -1;
background: transparent;
position: absolute;
top: 0;
height: 200px;
width: 200px;
border: 1px solid black;
}
.border:hover{
border: 1px solid green;
}
</style>
I don't know if this is the style you are trying to achieved. I've changed your css since your approach is to perform the ":hover" selector on the elements image and div.box. I haven't really tried performing in css two hovers at the same time. I would suggest you do it on jquery or javascript if you'd like.
You can try this out and comment your css.
Related
I have the same problem and I don't know how to do it. I have a title and both the title and the outlined box are in a container div together. I offset-ed the outlined box for the design. I want what is inside the container divto not show but what is outside to do. If you don't understand here are some pictures.
image - container shown as thin blue border, outline box as thick orange
this is with overflow: hidden; on the container.
Here's how the code's looking:
<!DOCTYPE HTML>
<head>
<style>
.container {
position: absolute;
margin-left: 40px;
margin-top: 20%;
width: 450px;
height: 150px;
overflow:hidden;
border: 2px solid #0d00ff;
}
.slog-box{
position: absolute;
left: 50px;
top: -25px;
width: 450px;
height: 150px;
border: 5px solid #ff6600;
}
</style>
</head>
<body>
<div class="container">
<div class="slog-box"></div>
<p class="slogan" id="slogan">
el rujido se escucha
entre las montañas
</p>
</div>
</body>
</HTML>
you see, I want to accomplish the opposite of what overflow hidden does. anyone know? would greatly appreciate it!
You can do something like this:
.container {
position: relative;
width: 400px;
}
.slog-box {
position: absolute;
width: 120%;
height: 100%;
top: -30px;
left: 30px;
border: 3px solid orange;
}
.slogan {
border: 3px solid blue;
font-size: 40px;
}
https://jsfiddle.net/8uzwcy5d/3/
im trying to build a ui with html.
The navbar should stay at the top
Some video below the navbar and the other content should scroll on the video( for now it is brown box) .
The sky blue box(which is for side navigation) should stop right below the nav box and pink box(content box) should continue scrolling.
issues :
the sticky nav box scrolls up after some scrolling and
the sky blue box doesn't stop below nav box.
please see the codepen and help me out....
html
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.container {
display: flex;
position: relative;
top: 400px;
border-top: 4px solid black;
}
.box1 {
/* height:500px; */
position: sticky;
top: 50px;
width: 40%;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1000;
height: 50px;
}
.image-con {
position: fixed;
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
z-index: -1000;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
https://codepen.io/mbs-yaswanth/pen/yZOLXQ
Remove
body,html{
height: 100%;
}
Once your sticky nav is hitting the bottom of your html and body it is not sticky anymore. It seems to move back up the page but its really just not following you through the overflow. Hope this helps.
EDIT
I think this is what you are looking for I changed a good bit of your code so just review it carefully. for some reason when you run the snippet box 2 gets smaller but it works in full page preview. Hope this helps
body,
html {
width: 100%;
margin: 0;
}
.box1 {
height:500px;
position: sticky;
top: 50px;
width: 39%;
vertical-align: top;
display: inline-block;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
display: inline-block;
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1;
height: 50px;
}
.image-con {
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="box1"></div>
<div class="box2"></div>
Here what I'm trying to create is shown in the image
I have used border-radius but it didn't helped me. what I have done so far is given on the snippet below:
.button-holder{
width:300px;
height:100px;
}
.button{
width:80%;
height:65%;
border-radius:50%;
border:2px solid #000;
background-color:#063755;
}
<div class="button-holder">
<div class="button"></div>
</div>
Please Note:- I know that it's possible to obtain the shape by merging
multiple <div> tags,but it will not help me. I looking for an answer
with a single <div> tag.
You need to use half the height in px, not %.
.button-holder{
width:300px;
height:100px;
}
.button{
width:80%;
height:65%;
border-radius:32.5px; // 100px * 0.65 * 0.5 = 32.5px
border:2px solid #000;
background-color:#063755;
}
<div class="button-holder">
<div class="button"></div>
</div>
you can use psuedo elements like this:
.button-holder {
width: 300px;
height: 100px;
background-color: #063755;
position: relative;
margin: 0 auto;
}
.button-holder:before {
content: '';
position: absolute;
height: 100%;
width: 33.33%; /* height/width */
top: 0;
left: -16.665%; /* 1/2 of the width */
border-radius: 100%;
background-color: #063755;
}
.button-holder:after {
content: '';
position: absolute;
height: 100%;
width: 33.33%;
top: 0;
right: -16.665%;
border-radius: 100%;
background-color: #063755;
}
<div class="button-holder">
</div>
Try this:
<html>
<head>
<style>
#corner {
border-radius: 100px 100px 100px 100px;
background: #73AD21;
padding: 20px;
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<p id="corner"></p>
</body>
</html>
output
I currently have a hover image and I am looking to add a right border #000 that only takes up 80% of the full length of the image. I have been trying to modify other "half border" codes to work for the right border to no avail.
Anyone know how?
Disclosure: Copied from here with a few changes.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top: -1px;
left: -1px;
height: 80%;
width: 1px;
background-color: #fff;
}
<div id="holder">
<div id="mask"></div>
</div>
My suggestion would would be to create an overlay for your image that is 80% of its height.
.image-container {
position: relative;
width: 50%;
}
.image-overlay {
width: 100%;
height: 80%;
border-right: 1px solid #000;
}
.image-with-overlay {
position: relative;
}
Here's a working example: http://jsfiddle.net/dLk6xrvr/
I am trying to create a horizontal scrollable div containing images but not sure why the below code is not working .
Moreover the images in the div are getting displaying vertically instead of horizonatlly.
Can anyone ple help me understanding the problem here
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
</div>
Below is the css :
div {
width:400px;
height:550px;
border:thin solid black;
overflow-x:scroll;
overflow-y:hidden;
position:relative;
}
img {
width:350px;
height:500px;
}
because the display of <img> is display: inline;, you should prevent them breaking the line:
using:
div {
white-space:nowrap;
}
to do this
demo: http://jsfiddle.net/fish_ball/vrD6E/
div {
border: thin solid #FF0000;
height: 550px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
width: 400px;
}
img {
height: 500px;
width: 350px;
}
img:nth-child(2) {
border: 1px solid #FF0000;
position: relative;
right: -358px;
top: -504px;
}
img:last-child {
border: 1px solid #FF0000;
left: 724px;
position: relative;
top: -1000px;
}
http://jsfiddle.net/kisspa/99xr7/