.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
This is css for my hover over image and text appreance.
http://jsfiddle.net/LbLHc/
here is what i have. How do i put the text inside of my image when i hover over?
thank you
Here is solution for you problem.
Html Code
<div class="row">
<div class="relative imgContainer">
<a href="works/nytimes/nytimes.html">
<span class="text">NY times magazine: Table of Contents</span>
<img src="http://placehold.it/500x200" class="img-responsive" />
</a>
</div>
<div class="relative imgContainer">
<span class="text">Eloquence Magazine</span>
<img src="http://placehold.it/700x500"class="img-responsive" />
</div>
</div>
**Css Code**
.imgContainer:hover .text{
display:block;
opacity:1;
}
.relative{
position: relative;
}
.imgContainer{
height: 250px;
width: 400px;
margin-bottom: 20px;
}
img{
height: 250px;
width: 400px;
}
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
display:none;
width: 100%;
height:100%;
text-align: center;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
display:block;
opacity:1;
}
FiddleLink
http://jsfiddle.net/anu1718/Y2AYj/
If I understand it correctly, you want to hide the text by default, and only show it when hovering over the image. IF you want to use just simple CSS for that, you need to have a common container for the image and the text (the latter one being absolutely positioned and hidden), and add a CSS rule targeting the :hover state of the container to show the text.
In your code I added a class (fadingtext) to the container:
<div class="row">
<div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
<span class="text">Title</span>
<img src="http://placehold.it/500x200" class="img-responsive"/>
</a>
</div>
<div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>
<img src="http://placehold.it/700x500" class="img-responsive" />
</div>
</div>
And here is your CSS with the fixed selectors:
.fadingtext .text {
position: absolute;
font-family:"courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255, 255, 255, 0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0;
left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.fadingtext:hover .text {
opacity:1;
}
Here is a modified version of your jsfiddle:
http://jsfiddle.net/Rws85/2/
Related
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
ive been trying to recreate the hover dual effect that is on https://andreas-demo.myportfolio.com/
However i cant seem to get both to align correctly and then i cannot get the affect that hovers over the entire section but that changes BOTH: 1- Darkening the image, 2 -inversing the colors.
I want to be able to get both affects to happen while hovering over the entire block, just like on the site above^.
Here's my code;
img {
display: block;
width: 60%;
height: 450px;
background-color: #f2f2f2;
!important;
-webkit-filter: brightness(100%);
}
a img:hover {
-webkit-filter: brightness(60%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.media {
background-color: #f2f2f2;
!important;
text-align: center;
}
p {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<a href="">
<div class="media">
<img src="img/pexels-photo-733438.jpeg" class="img-fluid" alt="Responsive image">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
On container:hover, set your container'background-color as black (default to white) and set the image opacity as 0.5.
Move the :hover pseudo-class to one of the 3 parent (wrapper) elements -
.container, .container > a, or .media element. This will have the effect of adding the overlay to both elements on :hover.
Like this:
.container {
font-family: Arial;
}
.container:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container__link {
display: flex;
text-decoration: none;
}
.media {
flex: 6;
background-color: #222222;
}
img {
display: block;
width: 100%;
height: 450px;
opacity: 1;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container:hover .media img {
opacity: 0.3;
}
.description {
flex: 4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color: #ffffff;
color: #222222;
}
.container:hover .description {
background-color: #222222;
color: #ffffff;
}
p {
padding: 0;
margin: 0;
}
<div class="container">
<a href="" class="container__link">
<div class="media">
<img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">
</div>
<div class="description">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
I've created an on/off button and I would like for the html's content's colors to invert when on and to be normal when off! And also I would like for the images and gifs to stay the same color.. I know it's complicated :x But the problem is since the button would be inside a div in html I can't use + space ~ or > to trigger the effect.. Does anyone know how it would be possible to do it please?
Here's the code for now but it's wrong for the html part..
function invertFunction(x) {
x.classList.toggle("invertbutton");
}
.invertfunction{
cursor:pointer;
position:fixed;
top:20px;
left:20px;
width:60px;
height:30px;
}
#onbutton{
width:60px;
height:30px;
background-color:#fff;
border-radius:10px;
border:1px solid #848484;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}
#movingbutton{
width:30px;
height:30px;
border-radius:10px;
border:1px solid #848484;
background-color:#BDBDBD;
-webkit-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}
.invertbutton #onbutton{
background-color:#42B94E;
}
.invertbutton #movingbutton{
transform: translate(30px);
}
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
<html>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton"></div>
</div>
</div>
</html>
Thanks for the help! :)
You can use this code here:
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
And you can remove this css:
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
div:not(#movingbutton) {
filter: invert(0%);
}
.invertfunction {
cursor: pointer;
position: fixed;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
}
#onbutton {
width: 60px;
height: 30px;
background-color: #fff;
border-radius: 20px;
border: 1px solid #848484;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
#movingbutton{
width: 28px;
height: 28px;
border-radius: 20px;
border: 1px solid #848484;
background-color: #BDBDBD;
-webkit-transition: .2s ease;
-moz-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
}
.invertbutton #onbutton {
background-color: #42B94E;
}
.invertbutton #movingbutton {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton">
</div>
</div>
</div>
<br>
<br>
<br>
<div style="background-color: red;" height="100px" width="100px">Example div1</div>
<div style="background-color: green;" height="100px" width="100px">Example div2</div>
<div style="background-color: blue;" height="100px" width="100px">Example div3</div>
<div>
<img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>
CodePen example
I have a css accordion that i need to auto close when each title is clicked. This way only one section will be open at a time. Right now they all stay open.
HTML
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"> title 1</label>
<article class="ac-small">
<p>some content</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">title 2</label>
<article class="ac-small">
<p>some content </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">title 3</label>
<article class="ac-small">
<p>some content</p>
</article>
</div>
</section>
CSS
.ac-container {
margin-left: 200px;
margin-top: 100px;
}
.ac-container h3 {
font-size: 1.2em;
margin-bottom: 25px;
margin-top: 5px;
margin-left: -70px;
width: 500px
}
.ac-container h1 {
font-size: 3.2em;
margin-bottom: 10px;
width: 370px;
color: #eb519c;
}
.ac-container p {
margin-left: 40px
}
.ac-container{
width: 450px;
margin: 10px auto 30px auto;
text-align: left;
height: auto;
background-color: #2d2d2d;
}
.ac-container label{
font-family: 'forced_squaremedium', helvetica , sans-serif;
padding: 5px 60px;
position: relative;
text-transform: lowercase;
z-index: 20;
display: block;
height: auto;
cursor: pointer;
color: #fff;
line-height: 33px;
font-size: 1.5em;
background: #ffffff;
}
.ac-container label:hover{
background: #2d2d2d;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #2d2d2d;
color: #5dc8d6;
background-image: url(../img/pinkBulletTurn.png);
background-repeat: no-repeat;
background-position: 3.1% -.1%;
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 413px;
top: 7px;
background: transparent url(../img/whiteBullet.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../img/blueBullet.png);
background-position:center bottom;
}
.ac-container input{
display: none;
background-image: url(../img/whiteBullet.png);
}
.ac-container article{
background: #43535b;
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
font-style: italic;
color: #fff;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.ac-container input:checked ~ article.ac-small{
height: auto;
}
.ac-container input:checked ~ article.ac-medium{
height: 180px;
}
.ac-container input:checked ~ article.ac-large{
height: 230px;
}
.ac-container label {
background-color: #2d2d2d;
background-image: url(../img/pinkBullet.png);
background-repeat: no-repeat;
background-position: 2.5%
}
I made code pen of it: http://codepen.io/anon/pen/zvBKby
Thanks!
You only need to change, in your input elements:
type="checkbox"
To:
type="radio"
But you should note that with this, always a tab will be open.
DEMO
I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/