I want to create a translucent background and display some text when user hover on the image like this http://demo.rocknrolladesigns.com/html/jarvis/#team . Is there anyway to make it without jquery?If yes,can anyone please teach me?
.container {
display: inline-block;
overflow: visible;
font-family: sans-serif;
font-size: 1em;
}
.theimg {
display: block;
width: 314px;
height: 223px;
border: solid 1px lightgray;
border-bottom: none;
transition: all .5s ease;
}
.container:hover .theimg {
opacity: 0.3;
}
.thename {
border: solid 1px lightgray;
text-align: center;
padding: 6px 0 6px 0;
transition: all .5s ease;
}
.container:hover .thename {
color: white;
background-color: #ffd600;
}
.thecover {
position: relative;
text-align: center;
top: -200px;
padding: 6px 0 6px 0;
opacity: 0;
transition: all .5s ease;
}
.container:hover .thecover {
top: -170px;
opacity: 1;
}
.thetitle {
font-size: 1.4em;
color: #515a7c;
font-weight: bold;
display: inline;
opacity: 1;
}
Yes, you can make it with CSS only:
<div class=container>
<img class=theimg src='http://demo.rocknrolladesigns.com/html/jarvis/images/team/team1.png' />
<div class=thename>MIKE ROSS</div>
<div class=thecover>
<div class=thetitle>FOUNDER</div>
</div>
</div>
See this and this for more info. jsfiddle
#wrapper span {
visibility:hidden;
position:absolute;
left: 50px;
top: 70px;
}
#wrapper:hover span {
visibility:visible;
}
#wrapper:hover img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div id="wrapper">
<img src="http://jonamdall.files.wordpress.com/2011/06/small-nyan-cat11.gif" />
<span>This is cat!</span>
</div>
Related
Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
I am trying to create an effect when div class="container" is being hovered, a smooth upper transition occurs of another div from bottom. Only during hover, this should happen cause I want that .bottom div to be hidden. When that div is not hidden, I can see the effect as I want. But as I hide the bottom div, that hovering effect smooth transition effect cannot be seen. Check this code once.
HTML CODE
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
CSS code
.box{
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top:80px;
left:0;
/* display: none; */
}
.box:hover .bottom {
display: block;
transition: linear 0.2s;
top:55px;
}
Here is the codepen link
https://codepen.io/Biebk/pen/MWpREqb
First off, rather than display: none to hide the incoming element altogether, you can set its opacity to 0, and then when the parent is hovered, set it to 1, like so:
.bottom {
opacity: 0;
}
.box:hover .bottom {
opacity: 1;
}
I suppose that given you want an incoming "pull-up" effect on hover, you want to that element to also "pull-down" when the hover ends. You can reverse the same effect by using a :not(:hover) on the parent element:
.box:not(:hover) .bottom {
opacity: 0;
}
Also, be sure to set the transition on the non-hovered state. The following example provides the smooth transition you're looking for:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
transition: all .25s ease;
}
.box:not(:hover) .bottom {
top: 80px;
opacity: 0;
}
.box:hover .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
A secondary approach would be to place the bottom div as a sibling to the box, and use the adjacent sibling combinator to apply the hover effects:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
font-size: 20px;
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
top: 80px;
opacity: 0;
cursor: default;
transition: all .25s ease;
}
.box:hover + .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
</div>
<div class="bottom">
Everyone
</div>
Use opacity property rather than display to achieve the desired effect, then
use the following code
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
opacity: 0;
}
.box:hover .bottom{
opacity: 1;
transition: opacity 0.2s , top 1s;
top: 55px;
}
Use the following code.
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.hovered{
transition: all .2s;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
visibility: hidden;
}
.hovered:hover+.bottom {
transition: all .2s;
top: 55px;
visibility: visible;
}
<div class="box">
<div class="hovered">Hello</div>
<div class="bottom">
Everyone
</div>
</div>
I am just attempting a simple fix. For some reason my divider isn't showing up on hover? How can I get it to show up like the other text does? I have another example of how i got the divider to look on other pages...
http://runningfish.net/finestc/about/
Right underneath the header of the page that says "About"
Also, what I am currently working with is runningfish.net/finestc
You can see the live code there right underneath the section that says "Recent Sales".
I am still a fledgling coder so if I am doing something inefficiently or could be doing better that you notice, please point it out! I want to get better at coding. Critique welcome!
Thanks!
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street</br>san diego, ca 92101
</p>
</div>
</div>
</a>
Add a width value to <hr>
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
/* added */
width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street<br>san diego, ca 92101
</p>
</div>
</div>
</a>
How to add TEXT in the image...so that the TEXT is view-able only when the image becomes dark when mouse is placed over it.. something like ..the one given in the example image below...
Thanks for your help.
.image {
width: 250px;
height: 200px;
background: black;
position: relative;
overflow: hidden;
}
.image img {
transition: all ease 1s;
}
.image:hover img { /* Darkening effect on mouseover */
background: black;
opacity: 0.7;
}
.image .arrow { /* Creates a half triangle with top and left arrow transparent */
opacity: 0;
border-color: transparent #f2f2f2 #f2f2f2 transparent;
transition: all ease 1s;
position: relative;
}
.image:hover .arrow { /* Mouseover effect */
opacity: 1;
font-family: Roboto;
font-size: 36px;
text-align: center;
border-image: none;
border-style: solid;
border-width: 45px;
position: absolute;
bottom: 0;
font-weight: normal;
width: 0;
height: 0;
right: 0;
}
.image:hover .arrow {
border-image: none;
border-style: solid;
border-width: 45px;
bottom: 0;
display: block;
font-family: Roboto;
font-size: 36px;
font-weight: normal;
height: 0;
opacity: 1;
position: absolute;
right: 0;
text-align: center;
width: 0;
}
.image .arrow {
border-color: transparent #f2f2f2 #f2f2f2 transparent;
opacity: 0;
position: relative;
transition: all 1s ease 0s;
}
.image .arrow span {
left: 5px;
position: relative;
top: -10px;
}
<div class="image">
<img src="http://lorempixel.com/250/200/sports" />
<div class="arrow"><span>></span></div>
</div>
enter image description here
It's simple. Create some text inside your wrapper div, then order the text to display on hovering the wrapper. Below is a demo of this logic.
The HTML:
<div class="image">
<p>I'm some very interesting text!</p>
<div class="arrow"><span>></span></div>
</div>
The CSS:
p{
color: #fff;
opacity: 0;
font-weight: bold;
text-align: center;
font-size:32px;
color: red;
/* bring your own prefixes */
transform: translate(0, 50%);
transition: all .5 ease;
}
.image:hover p {
visibility: visible;
opacity: 1;
}
CODEPEN DEMO
i think you can create like this
you need to change the position of the .image class so that text div can appear overlap on that
.image-hover-wrapper {
display:none;
text-align: center;
width: 250px;
color: red;
font-size: 35px;
position: relative;
top: -125px;
background: rgba(255,255,255,0.6);
}
.image:hover > .image-hover-wrapper{
display:block;
opacity:0.8;
transition-property: animation;
transition-duration: 2s;
transition-timing-function: linear;
}
<div class="image">
<img src="http://lorempixel.com/250/200/sports" />
<div class="arrow"><span></span></div>
<div class="image-hover-wrapper">
Hii
</div>
</div>
and here is the
Updated DEmo
I need help rotating text at the same time that the button rotates. For some reason the text is currently disappearing when I hover the mouse over the button. The text should not be disappearing; it should be rotating with the button I'm using Chrome for this project.
http://codepen.io/matosmtz/pen/oXBaQE
HTML
<body>
<div class = "container">
<section class="3d-button">
<h2>Animated Button</h2>
<p class="btn_perspective">
<button class="btn btn-3d btn-3da">Submit</button>
</p>
</section>
</div>
</body>
CSS
html, body {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
border: 0;
}
body {
font-family: Lekton;
background: rgb(245,245,245);
}
a {
color: #888;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
height: 100%;
background: #fff;
position: relative;
}
.container > section {
margin: 0 auto;
padding: 6em 3em;
text-align: center;
}
h2 {
margin: 20px;
text-align: center;
text-transform:uppercase;
letter-spacing: 1px;
font-size: 2em;
}
.btn {
border:none;
position: relative;
background: rgb(245,245,245);
padding: 15px 40px;
display: inline-block;
text-transform: uppercase;
margin: 15px 30px;
color: inherit;
letter-spacing: 2px;
font-size: .9em;
outline: none;
-webkit-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.btn_perspective {
-webkit-perspective: 800px;
perspective: 800px;
display: inline-block;
}
.btn-3d {
display: block;
background: #5cbcf6;
color: white;
outline: 1px solid transparent;
transform-style: preserve-3d;
}
.btn-3d:active {
background: #55b7f3;
}
.btn-3da:after {
width: 100%;
height: 42%;
left: 0;
top: -40%;
background: #53a6d7;
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-3da:hover {
transform: rotateX(-45deg);
}
Here's the updated codepen: http://codepen.io/anon/pen/KpaGYd
Added the following code to your button:
.btn-3da:after {
z-index:1;
}
.btn-3da:hover {
position:relative;
z-index:2;
}
You can take a look into this pure CSS3 solution (works in all major web browsers: DEMO):
/*ROTATE*/
.divRotate
{
-moz-transition : all 0.8s;
-webkit-transition : all 0.8s;
-o-transition : all 0.8s;
transition : all 0.8s;
}
.divRotate:hover
{
-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
}
Add the div element to your HTML and refer the class = 'divRotate'.
Hope this may help. Best regards,