Best Answer

Help - Resizing in an HTML widget that is using CSS

Annarose.Peterson
Rank
Userlevel 7
Badge +5

I am very much a novice in the CSS area, so any help will be greatly appreciated! 

I am trying to create an effect similar to the one below using CSS, where each image (or face as in the example below) is a clickable element:

The problem I am finding is the widget won’t automatically resize when the window is minimized.  I would like to avoid having scroll bars appear when the window is minimized a little bit and I am wondering if there is some attribute in the CSS that I can apply to allow the image to be resized when expanding and minimizing my browser window?

Here is the css and example html that I am using:

@charset "utf-8";
/*circle image*/
.circle-container {
  position: relative;
  /* 1 */
  width: 30em;
  height: 30em;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  /* 2 */
  box-sizing: content-box;
  /* 3 */
  margin: 0em auto 0;
  border: dashed 0px #ffffff;
}
.circle-container > * {
  /* 4 */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 6em;
  margin: -3em;
}
.circle-container > :nth-of-type(1) {
  transform: rotate(10deg) translate(10em) rotate(-10deg);
}
.circle-container > :nth-of-type(2) {
  transform: rotate(61deg) translate(10em) rotate(-61deg);
}
.circle-container > :nth-of-type(3) {
  transform: rotate(114deg) translate(10em) rotate(-114deg);
}
.circle-container > :nth-of-type(4) {
  transform: rotate(166deg) translate(10em) rotate(-166deg);
}
.circle-container > :nth-of-type(5) {
  transform: rotate(218deg) translate(10em) rotate(-218deg);
}
.circle-container > :nth-of-type(6) {
  transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.circle-container > :nth-of-type(7) {
  transform: rotate(325deg) translate(10em) rotate(-325deg);
}

.circle-container img {
  display: block;
  width: 100%;
  border-radius: 50%;
  filter: grayscale(100%);
}
.circle-container img:hover {
  filter: grayscale(0);
}
<table style="background-color:#f3f3f3;"><tbody>
<tr>
<td>
<div class="circle-container">
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a> 
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a> 
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a> 
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a> 
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a> 
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a> 
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a> 
<a href="/pages/1/home"><img src="IMAGE_URL.png" width="222" height="222" /></a>
</div>
</td>
</tr>
</tbody>
</table>

Any help would be super appreciated!

icon

Best answer by gstager 19 July 2022, 22:22

View original
Annarose Peterson (She/Her)

10 replies

gstager
Rank
Userlevel 7
Badge +5

I think I managed to re-create your widget with a different picture.

Gonna play with it a bit.

Greg
dklinger
Rank
Userlevel 7
Badge +6

I think every organization needs a @gstager 

gstager
Rank
Userlevel 7
Badge +5

@Annarose.Peterson 

OK - I think I know the direction you’ll need to go but it will mean a little re-work to determine sizing of your elements and space to get the values the way you like.

In a nutshell - I changed the  em  to  vw  which basically changed the values from a fixed value to a value that was relative to the viewport width.

I had to change a few values to get it to generically work but you will need to hone in the values to get the right look.

At least I think this is what you were after.

I went with 45vw instead of 30em and 15vw instead of 10em then I left the other values as is and just changed each em to a vw

 

Greg
gstager
Rank
Userlevel 7
Badge +5

I think every organization needs a @gstager 

Thanks @dklinger 

Now if I can just get every organization to feel the same way - LOL

Greg
Neil Patterson
Rank
Userlevel 6
Badge +2

I agree @dklinger!  Whatever you do @gstager, don’t leave your current job or change LMS supplier.  What would we do without you??? 😁

Neil
gstager
Rank
Userlevel 7
Badge +5

Thanks, @Neil Patterson 

Greg
H
Rank

@gstager: I want to create a hover effect with side shadows on an image. I am trying to do this using HTML widget but it doesn’t seem to work. Here’s the CSS code:

img:hover{-moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;}

Could you please help?

gstager
Rank
Userlevel 7
Badge +5

@gstager: I want to create a hover effect with side shadows on an image. I am trying to do this using HTML widget but it doesn’t seem to work. Here’s the CSS code:

img:hover{-moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;}

Could you please help?

@hsingh - Your code should work just fine.

You will need to place the CSS in the custom styles area of the Branding and Look part of the admin area

Then you will need to place your image in an HTML/WYSIWYG widget on a page

Something similar to this

<p><img id="myImage" src="https://path/to/your/image.png" width="250" height="250" /></p>

One thing I might suggest - I draw your attention to the fact that I have given my image an ID.

You may want to do this so you can specifically target just that image versus all images with your CSS

Here is how I modify the CSS to target that ID

#myImage:hover{
    -moz-box-shadow: 0 0 10px #ccc; 
    -webkit-box-shadow: 0 0 10px #ccc; 
    box-shadow: 0 0 10px #ccc;
}

Hope this helps.

The shadow may be a bit light on the default background color. You might try changing it to black or something more obvious so you know it is working.

Greg
H
Rank

Thanks Greg!

I tried this but it doesn’t show the hover effect. How do I change the color of shadow?

Is there a way to put in middle so that there is no extra space on below side of widget like below:

 

gstager
Rank
Userlevel 7
Badge +5

Thanks Greg!

I tried this but it doesn’t show the hover effect. How do I change the color of shadow?

Your initial code worked fine on my platform - at first I thought I confirmed it was broke but then I noticed it and changed the color and then it was clear that it was working fine.

The color is defined in your CSS with the hashtag. In this case  #ccc

Changing it to black  #000  will make it stand out on the widget background.

I would suggest applying a margin or limiting the size to 90% because I think you won’t see the hover shadow when the image goes all the way to the edge of the widget. It is outside the viewable area so to speak.

Greg

Reply


Terms & ConditionsCookie settings