I have a image, I want to add some effects. Hover overlay div I was able to add it. Now what I want to do is to add onclick event and change to another overlay div.
Here is my code, or see the CodePen Here
<div id="box">
<div id="overlay">
<span id="plus">+</span>
</div>
CSS:
body { background:#e7e7e7;}
#box { width:300px;
height:200px;
float: left;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size:cover;
border-radius:5px;
overflow:hidden;}
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px; }
I have only hover effect, when I click it should change Plus (+) to Minus (-) and at the bottom of the image div to appear a small div where will be placed a small description.
When the second overlay div is triggered, and I press back on Minus (-) it should change back. I will add here a image so that you can see what I'm trying to do.
In the image bellow you can see the blue div that should appear onclick event.
Firstly, the image appears to be content so it should inline HTML and not a background image and I have proceeded on that basis.
Forked Codepen Demo
Revised HTML
<div class="box">
<img src="http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg" alt="" />
<div class="overlay">
<h1 class="plus"></h1>
</div>
<div class="description">
<p>Lorem ipsum dolor.</p>
</div>
</div>
CSS wise, I have taken advantage of absolute positioning, pseudo elements and a little CSS3 transform to get everything in place. The latter allows flexibility in changing some font-sizing choices for the +/- and border sizes of pseudo element (the arrow).
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box {
width:300px;
height:200px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
border-radius:5px;
overflow:hidden;
position: relative;
}
.box img {
display: block;
}
.overlay {
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,.75);
text-align:center;
opacity:0;
-webkit-transition: opacity .25s ease;
}
.box:hover .overlay {
opacity:1;
}
.overlay .plus:before {
content:"+";
margin: 0;
padding: 0;
position: absolute;
top:50%;
left:50%;
font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:6rem;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.overlay.clicked .plus:before {
content:"-";
}
.description {
display: block;
position: absolute;
width:100%;
height:30%;
background-color: lightblue;
bottom:-30%;
text-align: center;
transition: bottom 0.25s ease;
}
.description:after {
content:"";
position: absolute;
width:0;
height:0;
left:50%;
border-style:solid;
border-color: transparent transparent lightblue transparent;
border-width: 16px;
top:0;
-webkit-transform:translate(-50%, 100%);
}
.overlay.clicked + .description {
bottom:0%;
}
.overlay.clicked + .description:after {
-webkit-transform:translate(-50%, -100%);
}
Finally, a little JQuery to add a clicked (or active) interaction by way of .toggleClass.
Jquery
(function($) {
$(".plus").click(function () {
$(this).parent().toggleClass("clicked");
});
})(jQuery);
use jquery
$(document).ready(function(){
var trigger = $(".plus");
var overlay = $(".overlay");
trigger.click(function(){
overlay.toggle('fast');
})
});
Related
This question already has answers here:
Double border with different color [duplicate]
(8 answers)
Closed 8 months ago.
I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically.
Now I'm facing one issue i.e. How to add two borders like this using css or any other style-sheet.
You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.
body{
background:#efefef;
}
.wrapper {
position: relative;
padding:10px;
}
.image {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}
<div class="wrapper">
<div class="image"></div>
</div>
It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.
Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.
.wrapper {
position: relative;
}
div {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
}
.first {
left: 5px;
top: 5px;
z-index: -1;
background-color: #777;
}
.second {
left: 10px;
top: 10px;
z-index: -2;
background-color: #AAA;
}
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="image"></div>
</div>
try this
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}
.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}
.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>
I created this box. I want this box to open when I hover my mouse over the part that is still visible. Now when I hover my mouse nothing happens. I think the error must be the JS file. Calling the function goes okay because if put for example an
alert("test")
in the close box function everything works except the box.
HTML:
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
CSS:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
JS:
function boxclose() {
document.getElementsByClassName("box").style.bottom="0px"
}
Useful link: https://www.w3schools.com/cssref/pr_pos_bottom.asp
You're using getElementsByClassName, which returns a list instead of one element, so you just need to tell it which element to target:
document.getElementsByClassName("box")[0].style.bottom="0px"
Working example:
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
You dont need javascript there, you can do that with css, too i will add a transition, try the following:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
transition:all .8s cubic-bezier(1,.65,1,.61);
}
.box:hover {
bottom:0;
}
<div class="box">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
If i'm not wrong changing your js file like this will work,
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}
Hello If i Properly understand you then please try this.
.box-popup {padding: 5px 10px; border:1px solid #ddd; position:relative;}
.box-popup span {display: none;}
.box-popup:hover span {display: block; padding: 10px; width: 200px; height: 100px; border:1px solid #eee; position: absolute; left:0; top: 30px;}
<div class="box-popup">
Hover
<span>
Hover Data
</span>
</div>
this is my html and my script as well. i know this is all really messy code so i apologize for that as i'm still learning. I would really appreciate some help with this issue. Thanks in advance
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#home" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
$("#circle" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
});
</script>
</head>
<body>
<p class="header"></p>
<p id="yellow"></p>
<p id="circle"></p>
<p id="body"></p>
<p id="body2"></p>
<p id ="logo"></p>
<p id="wood"></p>
<p id ="body3"></p>
<p id ="getintouch"></p>
<div >
<p id ="home">HOME</p>
<p id ="about">ABOUT</p>
<p id="contact">CONTACT</p>
</div>
<p id="circle1" class="circle"></p>
<p id="circle2" class="circle"></p>
<p id="circle3" class="circle"></p>
</body>
</html>
and this is my css
* { margin: 0; padding: 0; }
#font-face { font-family: Basic; src: url('fonts/basictitlefont.ttf'); }
.header{
position:realtive;
display: block;
width:100%;
min-height: 100px;
padding:0px;
margin:0px;
margin-top: 0px;
background-image: url(images/creamconcrete.png);
}
#yellow{
position:realtive;
display: block;
width:100%;
min-height: 15px;
background-color: ffa407;
padding:0px;
margin:0px;
z-index: 11;
}
#circle{
background-image: url(images/Counter.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#body{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: white;
padding:0px;
margin:0px;
}
#body2{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: 494949;
padding:0px;
margin:0px;
}
#body3{
position:realtive;
display: block;
width:100%;
min-height: 200px;
background-color: white;
padding:0px;
margin:0px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#wood{
background-image: url(images/woodshop.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#getintouch{
width:500px;
height:200px;
top: 1760px;
position: absolute;
left: 50%;
transform: translatex(-50%);
border:solid 8px #6d6c6c;
}
#home{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#6d6c6c;
position: absolute;
top:40px;
left:10px;
}
#about{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:200px;
}
#contact{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:400px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#circle1{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left: 50%;
transform: translatex(-50%);
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle2{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left:70%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle3{
opacity:0.7;
width:250px;
height:250px;
top:225px;
left:10%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
.highlighted {
background-color:#556677;
}
.active{
background-color: red;
}
This is probably a simple issue, but why does my script only run in the section for the id of home and not in the id of circle. I'm applying the same code and class to both but when i hover over my circle it doesn't change. whyyyyy
Are you talking about #circle specifically, or the other circle elements? If you're expecting this to work on #circle1, 2, and 3, it won't. You've added a class to those circle elements, so you'll need use a class selector instead.
$(".circle" ).hover( ... );
You'll also need to be aware of CSS specificity. Your .active selector will need to be at least as specific, if not more specific, in order for it to take effect. For example:
.active, #circle1.active, #circle2.active, #circle3.active {
background-color: red;
}
This is a pretty poor solution, which is why many people recommend avoiding the use of IDs and just using classes. If you switch those IDs to classes, you won't have to modify your .active selector. For example:
<p class="circle circle1"></p>
<p class="circle circle2"></p>
<p class="circle circle3"></p>
Then the CSS:
.circle1 { background-color: #ded7c9; }
.circle2 { background-color: #ded7c9; }
.circle3 { background-color: #ded7c9; }
.active { background-color: red; }
You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, if you aren't performing any logic on hover, then you don't need javascript. Just use the :hover pseudoclass in your CSS.
your active class Should Be like This
.active{
background-color: red !important;
}
The Background color of #circle is already applied to the Circle object
so Giving An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has.
The issue seems to be that you are not overwriting the background image. So you simply can't see the background color if the background graphic doesn't have any transparent parts,
.active{
background-color: red !important;
background-image: none !important;
}
I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.
The images I am fetching from database. So that are varying in number.
The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:
For Desktop screen:
For small screen:
Below is the div structure
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.
jsfiddle
Is there any way to dynamically adjust the width of div depending on browser's screen size?
You can use the #media queries. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>
This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.
Here is simple solution using CSS and HTML, no #media queries no JavaScript,
I just modified some lines of HTML and CSS to your code those are below.
HTML
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div>
</div>
<div class="buton-controls">
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
</div>
css
/* I wanted to center my loader */
#cycle-loader {
height:32px;
left:50%;
margin:-8px 0 0 -8px;
position:absolute;
top:50%;
width:32px;
z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
display:none;/* Only use this if you fade it in again after the images load */
position:fixed !important;
}
#arrow_left, #arrow_right {
bottom:45%;
height:67px;
position:fixed;
right:3%;
width:36px;
z-index:1000;
}
#arrow_left {
left:3%;
}
#arrow_left:hover, #arrow_right:hover {
bottom:45%;
}
#arrow_left:active, #arrow_right:active {
bottom:45%;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
/*I want to style my pager*/
#cycle-nav {
/* float:left;*/
margin-top: 8px;
margin-left: 0;
text-align: center;
}
#cycle-nav ul {
list-style-type:none;
width: 100%
}
#cycle-nav ul li {
/* border:1px solid #FF8000;*/
display: inline-block;
margin:3px;
}
#cycle-nav ul li a {
/*background: #057c96;*/
background: #49BED8;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li a:hover {
background: #000;
opacity:0.6;
}
#cycle-nav ul li.activeSlide {
/* border:1px solid #000;*/
/* background: #075262;*/
}
#cycle-nav ul li.activeSlide > a {
background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
#controls { width: 50%; float: left; }
.buton-controls{
width: 50%;
float: left;
text-align: center;
}
.buton-controls > div{
display: inline-block;
}
.button2{
background-color: red;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
text-align: center;
width: 70px;
color:#FFFFFF;
}
.button2:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
}
.button2hoverBg{
background-color:#137087 !important;
cursor:pointer;
opacity:1;
}
.button3{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
position: relative;
text-align: center;
z-index: 10;
width: 70px;\
}
.button3:hover, a:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
text-decoration:none;
color:#FFFFFF;
}
.button3 a{
color:#FFFFFF;
text-decoration:none;
}
.button1{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
height: 20px;
text-align: center;
width: 70px;
z-index: 10;
opacity: 0.4;
}
.button1 a{
color:#FFFFFF;
text-decoration:none;
}
Yes, use the vw and vh CSS properties.
1vw = 1% of window width,
1vh = 1% of window height.
http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design
I have been created time-line for my web page, by using html,css3 and js.
html:
<div class="cntl-state">
<div class="cntl-content">
<h4>Title 4</h4>
<p>India’s Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain’s Carolina Marin in the final.</p>
</div>
<div class="cntl-image"><img src="img/timelinesn-12.jpg" alt="tm12"></div>
<div class="cntl-icon cntl-center">2014</div>
</div>
</div>
css:
.cntl-center {
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.cntl-bar {
position: absolute;
width: 10px;
top: 0;
bottom: 0;
background-color: #ccc;
box-shadow: inset 0px 0px 7px -2px #000;
}
.cntl-bar-fill {
background-color: #66cc00;
position: absolute;
left:0;
right:0;
top:0;
height:0;
}
.cntl-state {
position: relative;
width:100%;
min-height: 200px;
margin-bottom: 50px;
}
.cntl-state::after {
display:block;
content: ' ';
clear:both;
}
.cntl-icon {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #003300;
border: solid 3px #009900;
box-shadow: 0px 0px 19px -9px #000;
position: absolute;
top: 0;
text-align: center;
line-height: 100px;
font-size: 40px;
color: #fff;
}
.cntl-content {
width: 30%;
padding: 2%;
background-color: rgba(238, 238, 238, 0.25);
border-radius: 8px;
border-bottom: solid 3px #009900;
float:left;
opacity:0;
position:relative;
margin-left:-40%;
}
.cntl-state:nth-child(2n+2) .cntl-content {
float:right;
margin-right:-40%;
}
.cntl-image {
opacity:0;
width: 40%;
padding: 2%;
}
.cntl-state:nth-child(2n+1) .cntl-image {
float:right;
}
.cntl-content h4 {
font-size:20px;
font-weight: normal;
margin-bottom: 10px;
}
/*
animations
*/
.cntl-bar-fill,.cntl-content,.cntl-image {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.cntl-state:nth-child(2n+2).cntl-animate .cntl-content {
margin-right:6%;
}
.cntl-animate .cntl-content {
opacity:1;
margin-left:6%;
}
.cntl-animate .cntl-image {
opacity:1;
}
And i have used js files also, i m trying to create jsfiddle, but can't able to get.
Now my page shows like this http://s30.postimg.org/54dkm4qoh/Untitled_2.png
I need like this dotted line, for joint the image and description.
http://s30.postimg.org/k522y658x/Untitled_1.png
Can anyone help me to give idea for creating dotted line that is join the both image and description?.
Thanks in advance.
If you want to know how to draw dotted line here is the code for it.
<head>
<title></title>
<style id="TempStyle"></style>
</head>
<body>
<hr style="height: 0;margin:50px;width: 200px;border-width: 5px;border-color: black;border-style: dotted;"><!-- horizontal line -->
<hr style="height: 200px;margin:50px;width: 0px;border-width: 5px;border-color: black;border-style: dotted;"><!-- vertical line -->
</body>
<script src="script.js"></script>
</html>
Actually its little messy when we try using CSS to do these sort of things. Still i think this is what you might be looking for Demo. I have just showed you the quick demo, but you will have to add cross browser support.
CSS & HTML
html, body {
height: 100%;
position:relative;
}
body{
color:#fff;
overflow:hidden;
}
.leftcont
{
position:absolute;
margin-left:0%;
display:block;
width:47%;
height:100%;
background:#333;
}
.timeline
{
position:absolute;
margin-left:47%;
display:block;
width:6%;
height:100%;
background:#ddd;
}
.rightcont
{
position:absolute;
margin-left:53%;
display:block;
width:48%;
height:100%;
background:#333;
}
.content1
{
padding:20px;
display:block;
height:150px;
width:200px;
float:right;
margin-right:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.content2
{
padding:20px;
display:block;
height:150px;
width:200px;
float:left;
margin-left:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.circle
{
display:block;
height:60px;
width:60px;
margin-top:100%;
border-radius:50%;
background:#000;
padding:15px 15px;
text-align:center;
font-size:22px;
}
#linel
{
position:relative;
float:right;
right:-44%;
top:17%;
display:block;
width:70px;
height:0.1px;
border:2px dashed green;
}
#liner
{
position:relative;
float:left;
left:-43%;
top:17%;
display:block;
width:65px;
height:0.1px;
border:2px dashed green;
}
<div class="leftcont">
<div class="content1">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="linel"></span>
</div>
<div class="timeline">
<div class="circle">2006</div>
</div/>
<div class="rightcont">
<div class="content2">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="liner"></span>
</div/>