I´m trying to do an effect and show a search icon font when the mouse hover my "image1.png".
I already did the effect with jQuery but now I do not see how I can integrate the iconic font with jquery. Has anyone done something like that? Can you give a little help?
<article id="loop-news">
<span id="testIcon"><I class = "fa fa-search-plus" > <!--show just on mouse hover -->
<img src="image1.png" id="test" />
<h2>Title </h2>
<p>My Post</p>
</article>
My css to hide icon font at first:
#testIcon>i{display:none;}
My jquery to give an opacity effect:
$("#test").hover(function() {
$(this).animate({opacity: 0.5}, 500);
}, function() {
$(this).animate({opacity: 1.0}, 500);
});
I would use CSS3 transitions if I understand your issue. In this example, I would just replace the font-family with your icon font (assuming that's how it works - never used it).
h2 {
position: aboslute;
margin-top: -350px;
display: none;
text-align: center;
font-family: arial;
}
#loop-news:hover h2 {
display: block;
}
#loop-news:hover img {
opacity: .5;
}
img, h2 {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
JS Fiddle
Related
I view this code sample to enlarge an image.
I try used it in bootstrap3 Slide Carousel.
I try add 'enlarge' class bootstrap3 slide carousel items.:
<div class="item active">
<div class="item-item col-md-3 col-sm-4">
<a href="#">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive enlarge">
</a>
</div>
</div>
css:
.enlarge {
width: 100%;
float: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.enlarge:hover {
width: 120%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
you can see change here in jsfiddle.
but it can not enlarge.how can I do it?
The issue is that, if you want to increase the width of the image to suppose 120%, the increase will work perfectly fine. But bootstrap.min.css has the following style properties for img element.
CSS:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Thus you are not able to scale above 100% if you add the class.
.carousel .img-responsive{
max-width:none;
}
It will override the CSS in bootstrap, if you any reason you are not able to view the changes you can add !important, which will override on priority.
.carousel .img-responsive{
max-width:none !important;
}
This will apply to all the images under the carousels.
If you want to specify only for one carousel, you can specify the ID of the carousel, like
#myCarousel .img-responsive{
max-width:none;
}
Here is a working DEMO.
JSFiddle Demo
I want to get a hover animation that changes the font-size and font-family the same time. I didn't manage to change back the font family precisely when the font-size transition has finished. Is this even possible?
What I have:
a{
-webkit-transition: font-size .2s ease;
-moz-transition: font-size .2s ease;
-o-transition: font-size .2s ease;
-ms-transition:font-size .2s ease;
transition: font-size .2s ease;
}
a:hover{
font-family: "MyHoverFont";
font-size: 3em;
}
What I tried:
a{
...
-webkit-transition: font-family.2s ease;
-moz-transition: font-family .2s ease;
-o-transition: font-family .2s ease;
-ms-transition: font-family .2s ease;
transition: font-family .2s ease;
}
a:hover{
...
font-family: "MyHoverFont"
}
You can't use animations or transitions with font-family. This means, you actually can do this, but it would change the font-family immediately instead of morphing from one font-family to another.
But I found a good workaround for this (here):
You could do the following: have two divs, each with the same text but
different font. The second div is absolute positioned below the first
div and hidden by default. When the times comes to "morph" the font,
animate the first visible div opacity to 0, and the second div to 1.
It should look like it's morphing at the expense of a little more
convoluted mark up.
Hint
It seems like you do something like the following:
a {
...
transition: font-size .2s ease;
...
transition: font-family .2s ease;
}
But in this case, the second rule overwrites the first rule, so the following is what you usually do:
transition: font-size .2s ease, font-family .2s ease;
Modern browser now support Variable fonts where you can control the available font's settings.
You could also go to this example for controlling the settings.
var changes = [
"'CASL' 1, 'MONO' 1, 'wght' 758, 'slnt' -14",
"'CASL' 0, 'MONO' 0.24, 'wght' 481, 'slnt' -2"
];
// style="font-variation-settings: ... "
text.style.fontVariationSettings = changes[1];
// Change variation every 2 sec
var index = 0;
setInterval(function(){
text.style.fontVariationSettings = changes[index];
index = index === 0 ? 1 : 0;
}, 2000);
#font-face{
font-family:"Recursive";
src:url("https://d33wubrfki0l68.cloudfront.net/0fb48cf42677cf004e48f2608a8521a4ca06b48d/8a39e/assets/fonts/recursive-mono_casl_wght_slnt_ital--2019_11_05-00_13.woff2") format("woff2-variations");
font-weight:300 900;
font-display:swap
}
#text{
text-align: center;
height: 100px;
font-size: 50px;
line-height: 100px;
font-family: Recursive;
font-weight: 500;
transition: 0.5s font-variation-settings ease-in;
}
<div id="text">Hello World</div>
Not all font and options is supported, if you want to find some variable font's resource you could go to this link.
You can use a variant version font, because font-variant uses a mathematical formula for transitions that css transition understands:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
I answered this in another question that I raised in Stack Overflow.
The Javascript demo is at:
https://www.cqrl.in/dev/font-transition-js.html
The GitHub code is here:
https://github.com/Sukii/font-transition
The TUGBoat paper is here:
https://tug.org/TUGboat/tb42-1/tb130venkatesan-transfont.html
When I click a div, I want a second div to expand/collapse. That is done using JS, HTML, and CSS. Now I want the CSS transition to animate.
Right now all I get is a jumping expansion and either a scroll (Edge) or a jump after a wait (Chrome, Opera, Firefox).
I've tried to set height to 1px instead of 0px, but that doesn't change anything.
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.height == '100%') {
ele.style.height = '0px';
} else {
ele.style.height = '100%';
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
overflow: hidden;
padding-left: 20px;
height: 0px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
Codepen behaves as I know the full site does, so for good measure; here's the codepen: http://codepen.io/anon/pen/ezJQjM
From http://css3.bradshawenterprises.com/animating_height/
Instead of using 100%, just "let it" get the auto value by not restraining it.
NOTE: 100px is just "any number bigger than the actual size"
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.maxHeight != '0vh') {
ele.style.maxHeight = '0vh';
} else {
ele.style.maxHeight = "100vh";
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
overflow: hidden;
padding-left: 20px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
EDIT: Changed everything to VH (viewport height) so it will never grow bigger than 100% of the screen height and will adapt to the max height of any screen.
Also switched the "style="max-height: 0vh;" to the element itself instead of the class, so you could be unsetting it with ele.style if needed (otherwise you will need to set a new value to override the class.
Are you willing to use jQuery? It offers some cool animation possibilities, and may accomplish what you are trying to do. This is just a possible alternative to your approach.
Check out my fiddle here:
https://jsfiddle.net/3mo28z1t/11/
<div class="main" id="clicker">
Expand
</div>
<div class="secondary" id="expandable">
number1, <br> number2, <br> number3, <br> number4.
</div>
<script>
$( document ).ready(function() {
$(".secondary").hide();
$(document).ready(
function(){
$("#clicker").click(function () {
$(".secondary").toggle("slow");
});
});
});
</script>
The problem is caused by switching units of measure, so from pixels to percent. I would probable do it a little differently though.
growDiv = function(id) {
document.getElementById(id).classList.toggle('expanded');
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
transition: max-height .5s ease;
overflow: hidden;
padding-left: 20px;
max-height: 0;
cursor: pointer;
}
.secondary.expanded {
height: 100%;
max-height: 100px;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
You'll notice the JS is a bit simpler, and it relies more on the CSS.
I'm trying to fade in an element on my page that is some text formatted with CSS. I can get a plain text element to fade in using element.fadeIn(). But that doesn't work with my document's current element. The onMouseOver and onMouseOut events are correctly just showing and hiding the element with no fade. I'm trying to get it to fade in (and eventually fade out) with the mouse events.
The first part of the <body>:
<body>
<div class="content">
<h1 class="title">Application</h1>
<ul id="sdt_menu" class="sdt_menu" >
<li onMouseOver="change_it('sub2');" onMouseOut="change_back('sub2');">
<a href="../app.exe">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">APPName</span>
<span class="sdt_descr">Click to Install</span>
</span>
</a>
Function for trying to fade in the text:
function change_it(id)
{
setVisibility(id, 'inline');
//id.FadeIn("slow");
// $('div.detail').fadeIn('fast');
}
Function to setting the visibility:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
The "sub2" element:
<div class ="detail" id="sub2">
<p><b>Welcome my application!</b></p>
<p>Here is a bunch of text I want to fade in during a mouse over another element!
</p>
</div>
From the CSS file:
.detail{
position: fixed;
top: 0;
left: 35%;
width: 650px;
height: 300px;
Line-height: 1.4em;
color : white;
}
Can someone spot the problem or suggest what I need to do to fade in the "sub2" element during that mouse over action?
Since you didn't answer my question about display vs visibility, I'll assume you want it to take up space (example):
css:
.fade-in
{
opacity: 0;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.fade {
opacity: 1;
}
jquery:
$(document).ready(function()
{
$('.fadeIn').on('click', function()
{
var target = $(this).data('target');
$(target).toggleClass('fade');
});
});
html:
Click me!
<div id="theId" class="fade-in">You clicked on Click me!</div>
<div>Hi!</div>
JsFiddle Example
The scenario: one main container, a child img with opacity 1 and a child span with opacity 0, both absolute positioned against the relative positioned parent div. Decrease the opacity of img and simultaneously increase the opacity of span. When the opacity exceeds some threshold, e.g. 0.01 and 0.99 hide/show (display: none; display: inline-block) the img/span respectively. And then the reverse process to show the img and hide the span. What would be the best solution (probably using CSS3) to achieve that?
<div id="post-cont">
<img id="post-img-1" class="post-img" src="small.jpg"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
Had some workaround with JS, but it is laggy so I would like to solve this using CSS3 and as minimal JS as possible.
CSS3 only
http://jsfiddle.net/SPmj5/7/
<div id="post-cont">
<img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
#post-cont {
position: relative;
}
#post-cont img,
#post-cont span {
display:block;
-o-transition: opacity .7s ease;
-ms-transition: opacity .7s ease;
-moz-transition: opacity .7s ease;
-webkit-transition: opacity .7s ease;
transition: opacity .7s ease;
}
#post-cont img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
#post-cont span {
position: absolute;
top: 100px;
left: 80px;
opacity: 0;
}
#post-cont:hover img {
opacity: 0;
}
#post-cont:hover span {
opacity: 1;
}
Be aware transition is not supported in IE8/9 http://caniuse.com/#search=transition
Sounds like some fadeToggle to me! I don't think you can use pure CSS3 for this..
https://api.jquery.com/fadeToggle/