Some images in my website needs to be darken when hovered, and also in the same time, to expose text that was hidden before that hover(the text will be displayed on top of the darken image).
I already implemented the img-darken part this way - http://jsfiddle.net/4Dfpm/.
What is a good way to implement the "expose text on hover(the same hover)" part?
Can it be done only with CSS, or I'll need to use a script this time ?
Thanks.
** How the img-darken part already implemented:
a.darken {
background: black;
}
a.darken img {
display: block;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
CSS Solution
Worked on your jsfiddle and changed jsfiddle is http://jsfiddle.net/4Dfpm/55/
I have added < span > inside < a > tag with class=darken
<span>text</span>
And updated css is
a.darken{
...;
position:relative;
...
}
new css added is
a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Obvious jQuery solution: Add the message in the markup:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span class="message">Some message here</span>
</a>
Add some css:
a.darken span{
display:none;
position:absolute;
top:0px; left:0px;
float:left;
color:white
}
Sprinkle of JQuery:
$('.darken').hover(
function(){
$(this).find('.message').fadeIn(1000);
},
function(){
$(this).find('.message').fadeOut(1000);
}
);
Et Voila: http://jsfiddle.net/4Dfpm/56/
Use a script to do that
HTML:
<div class="hoverText">Some text</div>
Js:
$("img").hover(
function () {
$(".hoverText").show();
},
function () {
$(".hoverText").hide();
}
);
Css:
div.hoverText{display = none;}
This a fiddle:
http://jsfiddle.net/HFgGx/
Adjust this mockup with your logic ;)
If you add a span inside the anchor, give it an RGBA color of white with no alpha, then on hover change the alpha value, you'll get the effect you want with CSS alone:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span>text</span>
</a>
Don't forget to position the span within the anchor, so that it doesn't display beneath the image.
a.darken {
display: inline-block;
background: black;
padding: 0;
position: relative;
}
a.darken span
{
position: absolute;
top: 10px;
left: 10px;
color: rgba(255, 255, 255, 0);
}
a.darken:hover span
{
color: rgba(255, 255, 255, 1);
}
http://jsfiddle.net/Kyle_Sevenoaks/4Dfpm/57/
Check the fiddle :
http://jsfiddle.net/4Dfpm/59/
all done throught css. althought you can achieve it with jQuery too,
your html i edited little bit:
<a href="http://google.com" class="darken">
<img src="http://callzeb.com/themes/images/JQuery_logo.png">
<span>123</span>
</a>
and edited little bit of css too:
a.darken {
display: inline-block;
background: black;
padding: 0;
width:229px;
height:200px;
overflow:hidden;
position:relative;
text-align:center;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
a.darken:hover span{
display:block;
position:absolute;
z-index:9999;
bottom:10px;
color:red;
font-size:24px;
}
span{display:none;}
Try this http://cssdesk.com/hrKeE
.captioned {
position:relative;
display:inline-block;
}
.captioned img {
display:block;
}
.captioned .caption {
position:absolute;
top:0;
left:0;
display:none;
width:100%;
height:100%;
color:white;
background:rgba(0, 0, 0, .75);
}
.captioned:hover .caption {
display:block;
}
Related
Toggle when closed
Toggle when opened
My goal is to create a toggle arrow like shown in the pictures. The "closed" state includes a line of text with an icon next to it as well as the arrow that then triggers the toggle. The "opened" state includes a few text lines and a picture (a little different than what's shown in the screenshot, but what I struggle with is really just the animation part).
I'm using a template from HTML5 Up which included a similar toggle in the menu bar, so I tried copying the respective HTML and CSS code which didn't work. There were no error messages and the toggle did not appear on the website (see snippet below for CSS).
<span class="opener">Text that appears next to toggle arrow</span>
Is there a way to do this with HTML and CSS or is Javascript required?
#menu ul a.opener, #menu ul span.opener {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
position: relative; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0; }
#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
color: #015a9d; }
#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
display: block; }
#menu ul a.opener.active:before, #menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg); }
You can do this easily with an html5 element called <details>
<details>
<summary>Click here to see something</summary>
Here's more stuff below :)
</details>
The details tag should be the preferred way of doing it. But if you want to have it more fancy or other reason you can't use the details tag you could create such a dropdown yourself.
Maybe something like this:
CSS
.dropdown {
postion: relative;
}
.dropdown-content {
display: flex;
flex-direction: column;
width: fit-content;
border: 1px solid transparent;
position: absolute;
opacity: 0;
background: white;
z-index: 9;
transition: height 0.5s ease;
transition: opacity 0.3s ease;
height: 0;
overflow: hidden;
}
.dropdown.active .dropdown-content {
opacity: 1;
height: fit-content;
border-color: gray;
}
.dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(90deg);
transition: all 0.3s ease;
}
.dropdown.active .dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(-90deg);
}
HTML
<div class="dropdown">
<button class="dropdown-trigger"> <i><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg></i> Open</button>
<span class="dropdown-content">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</span>
</div>
https://codepen.io/bluebrown/pen/qBZRaVX?editors=0100
I want to create animated progress as below, but the thing is it is not working properly on safari browser
The css property which I used is:
.prgoressBar {
width: 100%;
margin: 0 auto;
height: 22px;
background-color:#BBBBBB;
overflow: hidden;
}
.prgoressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #185A8D;
box-sizing: border-box;
color:#fff;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
transition: width 1s linear;
}
<div id="QM_progressBar" class="prgoressBar">
</div>
Try using the 'transform: scaleX()' instead of changing the width. Transform uses to run better with transition, maybe that's why Safari is freaking out.
I don't have Safari installed right now, so please check if this codepen works: https://codepen.io/thiagoberrutti/pen/GRmLzZK.
In the codepen I used transition but in this snippet I tried with animations instead, see if one of them can work on Safari:
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear forwards;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
<div class="progress-container">
<div class="progress" style="--time:5s"></div>
</div>
Spin on the popular question. In this case, I have a div that I want to darken when I mouseover, while not darkening the text inside it. I am halfway there; I can achieve this if I mouseover in the div anywhere besides the div that contains the text.
Here is my attempt: http://jsfiddle.net/59M7N/. Notice that if the mouse is over the top region of the box, the hover effect will not occur.
HTML
<div id="text">Hello World</div>
<div id="box">
<div id="opaque"></div>
</div>
CSS
#box {
height:200px;
width:200px;
border:5px solid black;
}
#opaque {
position:absolute;
width:200px;
height:200px;
background-color:black;
opacity:0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#opaque:hover {
opacity:0.6;
}
#text {
position:relative;
color:blue;
top:25px;
left:10px;
z-index:5;
}
You can simplify both your HTML and CSS by adding a transition on a background RGBA color on the :hover, the last value being the opacity. As you are transitioning the background only, the text is unaffected.
Demo Fiddle
<div id="box">Hello World</div>
CSS
#box {
height:200px;
width:200px;
border:5px solid black;
color:blue;
background:rgba(0, 0, 0, 0);
transition:background 200ms ease-in;
}
#box:hover {
background:rgba(0, 0, 0, .5);
}
I am trying to implement a Jquery Hover function on my Company Logo. I want to achieve this :
However, I had achieved THIS
I used the following logic :
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
You can check my JS Fiddle here : http://jsfiddle.net/Jiteen/xZ6Hv/
Any sort of Help or Suggestion is Appreciated.
How about the below as a starting point? No need for JS!
Demo Fiddle
HTML
<div>
<div href="#" class="word" data-text="edia">M</div>
<div href="#" class="word" data-text="antra">M</div>
</div>
CSS
.word {
display:inline-block;
font-size:1em;
line-height:1;
position:relative;
font-size:50px;
}
.word:first-child {
color:orange;
}
.word:last-child {
color:grey;
}
.word:after {
content:attr(text);
position:relative;
display:inline-block;
overflow:hidden;
max-width:0;
color:black;
font-size:20px;
transition:max-width .5s ease-in;
}
div:hover .word:after {
max-width:40px;
}
You can achieve this by using a structure like this:
<div class="logo">
<div class="m1">M</div>
<div class="m3">aaa</div>
<div class="m2">M</div>
<div class="m4">aaa</div>
</div>
And animate it by changing the width of .m3 and .m4
jsFiddle
This is what i would do: http://jsfiddle.net/A6vYy/.
Do note though, that if you're using images instead of divs you can skip some of the CSS.
JS
$(document).ready(function () {
$(".logo").on("mouseenter", function () {
$(this).find(".hidden").animate({width: "50px"});
}).on("mouseleave", function () {
$(this).find(".hidden").animate({width: "0px"});
});
});
HTML
<div class="logo">
<div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>
CSS
.part, .hidden {
width: 50px;
height: 50px;
background: red;
display: inline-block;
font-size: 24px;
text-align: center;
vertical-align: top;
}
.hidden {
width: 0px;
overflow: hidden;
}
Try this out :
<div class="media">
<span class="big">M</span>edia
</div>
<div class="mantra">
<span class="big">M</span>antra
</div>
Css:
.media,.mantra{
width:28px;
overflow: hidden;
float:left;
margin-left:2px;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
cursor: pointer;
}
.media:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.mantra:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
}
.big{
font-size: 2em;
color: #ff8800;
}
Working Demo :http://jsfiddle.net/Jiteen/xZ6Hv/
has anyone any idea if you can do this in jquery? Where clicking on a piece of the logo expands the rest? Example image:
Why use jQuery if this can be achieved using CSS?
HTML:
<div id='icon-wrapper'>
<img id='icon' alt='icon' src='http://i.stack.imgur.com/sKhJf.jpg?s=60&g=1'/>
<p>Text here</p>
</div>
CSS:
#icon-wrapper{
margin:0 auto;
height:110px;
width:110px;
overflow:hidden;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper:after{
content:"";
display:block;
width:100%;
clear:both;
}
#icon-wrapper:hover{
width:300px;
}
#icon-wrapper:hover #icon{
margin-left:200px;
}
#icon{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/* Position Absolute to put the icon on the top */
position:absolute;
z-index:10;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper p{
color:black;
font-size:35px;
font-family:arial, helvetica;
/* Fixed width and float left is needed */
width:200px;
float:left;
}
It's long but without using jQuery is a plus point.
Note that we need to use fixed width for the elements, especially for the paragraph.
UPDATE:
For transparent icon, we need to hide the text first, using opacity:0;. Then add CSS Transition so we have smooth effect on hover. Finally, show the text on hover with opacity:1;. But this trick has a bug, sometimes the text didn't 'hide' fast, so it's still shown for a time in the icon. The best solution is adding a background color to the icon, using the same color as the container background.
Updated CSS (transparent text):
#icon-wrapper:hover p{
opacity:1;
}
#icon-wrapper p{
/* ... */
opacity:0;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-ms-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
}
Updated CSS (using background color on the icon):
#icon{
/* ... */
background:white;
}
Here is a jsFiddle
Here is an updated fiddle for transparent icon.
Here is an updated fiddle with background color added to the icon.
Not sure if this is something you want.
Check the demo here: http://jsfiddle.net/SdanM/4/
HTML:
<div id="container">
<div id="img">Hidden Element</div>
<div id="btn">Hover to expand</div>
<div>
CSS: hide the hidden element first
#container {
position: relative;
}
#img {
background-color: yellow;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
left: 50px;
display: none;
}
#btn {
background-color: red;
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
jQuery: move the blocks
$("#container").mouseenter( function() {
$("#img").animate({
left: "-=50",
width: "show",
}, 1000);
$("#btn").animate({
left: "+=50",
}, 1000);
});
$("#container").mouseleave( function() {
$("#img").animate({
left: "+=50",
width: "hide",
}, 1000);
$("#btn").animate({
left: "-=50",
}, 1000);
});