Profile
| Simply Effective | Image Styles
Using the default code, you can delete or modify certain properties to change the way your image looks and works.
For the hue-rotate version, check the next section.
Mobile friendly
Custom + Bootstrap colors
Square or rectangular images
Rounded (default)
Uses class "rounded-circle"
Uses class "rounded-circle"
Square
Remove class "rounded-circle"
Remove class "rounded-circle"
Rounded square
Remove class "rounded-circle"
Add "border-radius: 25%;" in style
Remove class "rounded-circle"
Add "border-radius: 25%;" in style
No image in small devices (>576px)
Add class "d-none d-sm-block" to image + image credit
Add class "d-none d-sm-block" to image + image credit
Method for the "BS Primary (hue-rotate)" version
Using hue-rotate will cause the border's and the image's color to change. The image code is inside the div that has the border, so it inherits it's hue-rotate properties.
You can nullify the hue-rotate of the border by appliying a negative hue-rotate to the image's div. If you're using 90deg for the border, add -90deg to the image.
Not ideal (but cool effect)
No hue-rotate on image
No hue-rotate on image
Correct code
Hue-rotate -90deg on image
Hue-rotate -90deg on image