Icons with Text located beside it - html

Question

I am trying to use custom icons (3 of them) be located in their own cell in a table with the cell directly beside them being the text that goes along with them. I want the text to be close to the image. The image is to enlarge slightly when hovered over as it will also be a hyperlink. I can't seem to get code to ensure it is aligned center of the page and formatted correctly. Also the scale isn't working when I set it to enlarge on hover.
I have already tried multiple codes but none seem to be working within sharepoint.
.demo-problem,
.demo-solution {
font-size: 1.5em;
}
body {
padding: 30px;
}
.outer-div {
padding: 30px;
}
.inner-div {
margin: 0 auto;
width: 100%;
height: 100%;
}
.demo-solution--flexbox {
display: flex;
align-items: center;
}
img3 {
width: 25%;
height: auto;
display: block;
}
img3:hover {
transform: scale(3);
}
a:hover {
text-decoration: none;
color: black;
font-weight: bold;
}
<div class="demo-solution demo-solution--flexbox">
<div class="outer-div">
<img src="https://ontariopowergeneration.sharepoint.com/:i:/r/sites/powernet/support/res/PublishingImages/Pages/Real%20Estate/Icons/ICON_Real-Estate.png?csf=1&e=acVaiZ" alt="" class="img3">
</div>
<div class="inner-div"><span><blockquote>Corporate Real Estate & Workplace</blockquote></span></div>
</div>

Answer 1

The img3 is a class so u need to specify
.img3 whereas you have done just img3.
If you change it to .img3 scale works
.demo-problem,
.demo-solution {
font-size: 1.5em;
}
body {
padding: 30px;
}
.outer-div {
padding: 30px;
}
.inner-div {
margin: 0 auto;
width: 100%;
height: 100%;
}
.demo-solution--flexbox {
display: flex;
align-items: center;
}
.img3 {
width: 25%;
height: auto;
display: block;
}
.img3:hover {
transform: scale(3);
}
a:hover {
text-decoration: none;
color: black;
font-weight: bold;
}
<div class="demo-solution demo-solution--flexbox">
<div class="outer-div">
<img src="https://www.slipperelectrical.co.nz/wp-content/uploads/2015/12/dummy-image.jpg" alt="" class="img3">
</div>
<div class="inner-div"><span><blockquote>Corporate Real Estate & Workplace</blockquote></span></div>
</div>