We Keep Coding

hovering parent div changes 0-width child div to match contained image width

I have several divs, each containing an icon and a tooltip-type image:
The container is square, height=135px and width=135px.
The icon div is mostly square, has height=135px, width=auto, it's image height=100% and width=autoto keep aspect ratio. The width is smaller than the height.
The tooltip is rectangular, height=135px, width=auto, it's image height=100% and width=auto. The width is usually at least two times larger than the height.
The images are aligned with Bootstrap 4 classes.
Together, the container divs form up a kind of mosaic of services. When each icon image is hovered, the corresponding tooltip-like image appears with a "book opening" animation, from the center of the icon. What I mean is, the child div has width:0; until the parent is hovered, then it animates to width:[width of contained image];. The markup is as follows:
<!-- container div -->
<div class="int_Sicon mx-2 my-2">
<!-- div containing the icon -->
<a href="corresponding service page">
<div class="d-block dLarge">
<img height="100%" src="the icon url">
</div>
</a>
<!-- div containing the tooltip -->
<div class="int_Stooltip dLarge">
<img height="100%" src="the tooltip url">
</div>
</div>
I had a buggy css animation doing what I wanted for a specific "tooltip" image, for layout testing purposes (the following css code), but it all broke apart when I finished testing and started adding the rest of the images. I had specific widths set, and utilized the left property to achieve what I intended, but right now I'm finishing development and wanted to allow the user to change images without breaking the layout. Each tooltip is a different image with the same height but varying widths. This is the CSS I have right now:
.dLarge { height: 135px; }
/* for different viewports I also have different heights for the icons and tooltips, but for the sake of clarity, let's focus on "dLarge" - 135px height */
.int_Sicon { position:relative; }
.int_Sicon .int_Stooltip {
visibility: hidden;
position: absolute;
z-index: 1;
overflow: hidden;
pointer-events: none;
top:0;
left: 0;
margin:0;
-webkit-transition: width 0.3s ease-out, left 0.3s ease-out;
-moz-transition: width 0.3s ease-out, left 0.3s ease-out;
-o-transition: width 0.3s ease-out, left 0.3s ease-out;
transition: width 0.3s ease-out, left 0.3s ease-out;
}
.int_Sicon .int_Stooltip::after {
content: "";
position: absolute;
}
.int_Sicon:hover .int_Stooltip {
visibility: visible;
left: -100%;
}
So I started messing around with javascript and this is where I ended up, unsucessfully:
var getWidth = $('.int_Stooltip>img').outerWidth();
$('.int_Stooltip').css({'width' : 0});
$('.int_Sicon').hover( $('.int_Sicon>.int_Stooltip').css({'width' : getWidth}); );
I looked everywhere for a solution, but nothing I find quite suits what I want to accomplish.
I based myself on this StackOverflow question: Expand div from the middle instead of just top and left using CSS
Essentially, I wanted to make something on the lines of this https://codepen.io/wintr/pen/wWoRVW except with an image covering the button instead of a background animation.
I'm using Bootstrap 4.0 beta 2 and Jquery 3.2.1.
I'm self taught, and eager to learn more. What am I missing? Or at least, where should I look?

If your trying to achieve the effect in the code pen example. You'll want to have your tooltip centered by default with a width of 0. You can center an absolutely positioned element by setting its top, right, bottom, and left properties to 0, then setting its margins to auto. Then when you hover, the width should change to 100%. Check out the code below. I added some colors and text just to help visualize it since there were no actual images.
.int_Slogo {position:relative; display:inline-block;}
.int_Slogo .int_Stooltip {
width: 0;
position: absolute;
z-index: 1;
pointer-events: none;
overflow: hidden;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
-webkit-transition: width 0.3s ease-out, left 0.3s ease-out;
-moz-transition: width 0.3s ease-out, left 0.3s ease-out;
-o-transition: width 0.3s ease-out, left 0.3s ease-out;
transition: width 0.3s ease-out, left 0.3s ease-out;
}
.int_Slogo:hover .int_Stooltip {
width: 100%;
}
<div class="int_Slogo mx-2 my-2">
<a href="Services">
<div class="d-block dLarge">
<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text/">
</div>
</a>
<div class="int_Stooltip dLarge">
<img src="http://lorempixel.com/400/200/sports/Dummy-Text/">
</div>
</div>

I woke up especially inspired this morning and came up with the solution. The answer wasn't in defining the widths of the divs, but specifying css for the images themselves. This is what I came up with.
Markup:
<div class="dLarge int_Sicon mx-2 my-2">
<a href="corresponding service page">
<div class="d-block">
<img class="dLargeImg m-auto d-block" src="imgsrc">
</div>
</a>
<div class="int_Stooltip">
<img class="dLargeImgs m-auto d-block" src="imgsrc">
</div>
</div>
Styles:
.dLarge {
height: 135px;
width: 135px;
}
.dLargeImgs { height:135px; }
.int_Sicon {
position:relative;
display: inline-block;
}
.int_Sicon .int_Stooltip {
position: absolute;
top:0;
right:0;
bottom:0;
left: 0;
margin:0;
z-index: 1;
pointer-events: none;
overflow: hidden;
-webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
}
.int_Sicon:hover .int_Stooltip {
left:-50%;
right:-50%;
}
.int_Sicon .int_Stooltip img {
width:0;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out}
.int_Sicon:hover .int_Stooltip img { width:100%; }

CSS transition hover (h1 inside a div seems not to work properly)

I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.
Here's the css code.
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
transition: font-size 1s linear;
opacity: 1;
transition: opacity 1s linear;
}
I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?
If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.
I tried to work around the problem and write a JS script for enlarging the text.
Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.
However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right?
How can I solve that problem? Either with CSS or JS?
Thanks in advance ;).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
<script>
var JSinner1 = document.getElementById("inner1");
var JSastroh1 = document.getElementById("astro-h1")
JSastroh1.style.fontSize = "16px";
var textBigger = function() {
var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
window.setInterval(textBigger, 1)
if (parseFloat(newSize) < 60) {
JSastroh1.style.fontSize = newSize;
console.log(newSize);
}
}
JSinner1.addEventListener("mouseover", textBigger)
</script>
</body>
</html>

You're overwriting one transition with another. Try with
transition: font-size 1s linear,opacity 1s linear;

It's very simple, the problem is your :hoverselector, as you are adding two transitions properties, the last one is overwriting the previous one. In order to make this work, just add this to that rule:
transition: opacity 1s linear, font-size 1s linear;
Or you can use
transition: all 1s linear;

instead of using
transition: font-size 1s linear;
transition: opacity 1s linear;
use all
transition: all 1s linear;
or merge the two into one transition: font-size 1s linear,opacity 1s linear;
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
transition: all 1s linear;
}
<div id="inner1">
<h1> Some text </h1>
</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
transition: opacity 1s linear, font-size 1s linear;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
</body>
</html>

css transitions not working on firefox

I have a similar issue as CSS Transition not firing when adding class to body (Firefox) but I can seem to find a way to solve it targeting the element in different ways or removing classes.
Here is what I have:
Markup:
<div class="ball b40 first">
<a class="ffx-fx" href="javascript:void(0)">
</a>
</div>
css:
.ffx-fx {
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.b40 a {
width:220px;
height:220px;
background: url(../images/temp/1_a.jpg) center center;
background-size: 100% 100% !important;
}
.b40 .b40-rotated {
width:220px;
height:220px;
background: url(../images/temp/1_b.jpg) center center !important;
}
js:
window.setInterval(function() {
$( ".b40 .ffx-fx" ).toggleClass( "b40-rotated" );
}, 5000);

I don't believe you can switch out background-images with transitions. At least I haven't tried it. How I usually handle this situation is have two inner divs--one with the on hover class and one with the off class. Then on hover, I change opacity. Opacity transition works. Sooo something like this...
HTML
<div class="container">
<a href="">
<div class="off_state"></div>
<div class="on_state"></div>
</a>
</div>
CSS
.container{position:relative;}
.off_state, .on_state{
position:absolute;
top:0;
left:0;
transition: all 1s;
}
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);}
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}
It's a rough version, but that's how I've always done it.
NOTE: jQuery UI also has the ability to add a class slowly. You can view it here: http://jqueryui.com/addClass/. It would probably be easier to use.

Trying to apply transition effect to hover

My CSS:
a:hover {
position: relative;
}
a:hover:after {
z-index: -1;
content: url(icon.jpg);
display: block;
position: absolute;
left: 0px;
bottom: 20px;
}
This displays an icon when I hover over an anchor, from this post:
Make image appear on link hover css
I am trying to apply this:
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
So that the image fades in, but I cant get it to work.

WebKit (Chrome, Safari) does not support transitions on pseudo elements. It should work in Firefox.
see this q/a
To accomplish your need you could apply the background image for the link and in hover you could apply the transition by setting the background-position. You can also use an extra span inside the a tag instead of using :before pseudo class.

You could do a background image.
a {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
a:hover {
position: relative;
background:url(icon.jpg);
}
The code is just an example, you would need to position the background image as well, since I dont know the dimensions of your design I can't tell you the exact position.

Webkit currently support transitions and animations
http://css-tricks.com/transitions-and-animations-on-css-generated-content/
a:hover {
position: relative;
}
a:after{
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /*never forget the standard*/
}
a:hover:after {
z-index: -1;
content: url(icon.jpg);
display: block;
position: absolute;
left: 0px;
bottom: 20px;
}
And the example used before:
http://jsfiddle.net/d2KrC/88/
The example using image
http://jsfiddle.net/d2KrC/92/

There are some css "tricks" that can help you, maybe using css keyframes, but the best way to perform this in a compatibility way is using jQuery (a jquery version that matches your compat needs).
As some people asked you on css, where webkit actually support this kind of transitions, and this question could grow if we start talking on standards, the best you can do at first is update all your browsers and check.
If you need or want to keep compat on older browser versions, you'll need to catch the hover event with javascript and then do whatever you want (as javascript can work directly with the DOM) and with CSS is pre-loaded and the most you can do is change the properties. i.e.
load image with display: none, then change this property with an event.
example on jquery:
$('.link').click(function(){
$('.foo').fadeIn();
});
$('.link2').click(function(){
$('.foo2').fadeToggle();
if($('.link2').text() == 'show or hide') $('.link2').text('click again');
else $('.link2').text('show or hide');
});
.foo, .foo2{display: none; width: 100px; height: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<img class="foo" src="http://joelbonetr.com/images/root.jpg" alt="">
<a class="link" href="#">show it!</a>
</p>
<p>
<img class="foo2" src="http://joelbonetr.com/images/root.jpg" alt="">
<a class="link2" href="#">show or hide</a>
</p>

Opacity on a div hover

So far I've got this code
http://jsfiddle.net/Nq79H/1/
but I want to fadeout the image in order to leave only the text visible.
Do I need to change the javascript or write a new css div?
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});

...but I want to fadeout the image in order to leave only the text visible.
Simply add .fadeToggle() to the img element as well:
$('img', this).fadeToggle();
JSFiddle example.

Here is the CSS3 transition solution:
jsFiddle
CSS
.thumb .text {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #999;
background: rgba(0, 0, 0, 0.3);
text-align: center;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
opacity:0;
}
.thumb:hover .text {
opacity:1;
}
.thumb img {
opacity:1;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
}
.thumb:hover img {
opacity:0;
}
Support
The support for CSS3 transitions is pretty decent now, the latest versions of all the major browsers (Safari, Chrome, Opera, Firefox) all support transitions. IE on the other hand only supports it from version 10. Transitions are nice though in that they don't crash and burn when something doesn't support it. The opacity of the element will still change, there will just be no transition.
References
Caniuse.com transitions

If you want to fadeIn text and fadeOut image, just add one more line:
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
$(this).children("img").fadeToggle();
});

$(this).find('img').fadeToggle();

Is this what you're looking for?
$('.thumb').hover(function(){
$(this)
.find('.text-js')
.fadeToggle()
.end()
.find('img')
.fadeToggle();
});
http://jsfiddle.net/Nq79H/4/

No JS or additional HTML needed.
http://jsfiddle.net/Nq79H/11
.thumb img {
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
.thumb:hover img {
opacity: 0;
}