> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.janitorai.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Code Collection: Images

# Images
###### Image overlays/filters (for all images or for bot images only, with hover action)
The codes displayed below have the automatic hover feature, meaning that the overlay will stay on the elements unless you hover your cursor over it.
Credits to Iorveths
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_7z5ctb.png)ote:** if you don't want the filter to disappear upon hovering, delete the section of the code labeled `HOVER ACTION`. For the value `FILTER`, check [this page](https://www.w3schools.com/cssref/css3_pr_filter.php) to figure out how to add specific filters.
**all images (including profile picture, bot image, images located in profile card)**
```
<style>
/* FILTER CODE */
img{
filter: FILTER(100%);
-webkit-filter: FILTER(100%);
-webkit-transition: all 0.2s ease;
}
/* HOVER ACTION */
img:hover{
filter: none;
-webkit-filter: none;
transition: 0.2s ease;
}
</style>
```

**bot image only**
```
<style>
/* FILTER CODE */
.css-1yg1q7c{
filter: FILTER(100%);
-webkit-filter: FILTER(100%);
-webkit-transition: all 0.2s ease;
}
/* HOVER ACTION */
.css-1yg1q7c:hover{
filter: none;
-webkit-filter: none;
transition: 0.2s ease;
}
</style>
```

###### Image in rows/columns (putting content in tables)
This can be useable for anything other than images.
This code makes it possible to put images next to each other on the profile card, essentially making rows. The example below is taken from Iorveths' profile (profile linked after the code)
Credits to Iorveths
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_14nwmfb.png)
```
<div class="row">
<div class="column">
HTML CODES FOR IMAGES/GIFS
</div>
<div class="column">
HTML CODES FOR IMAGES/GIFS
</div>
</div>
<style>
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
/* (optional) Responsive design for mobile devices */
@media screen and (max-width: 600px) {
.column {
width: 100%; /* Full width on small screens */
}
}
</style>
```
Replace `HTML CODES FOR IMAGES/GIFS` with the HTML code that displays images on your profile card. You can access the code of images/gifs you have already uploaded before by opening the `</> Source Code` in the text editor. You may also use the code you used for clickable images, or go to this [site](https://www.html.am/html-generators/image-code-generator.cfm) that generates image code for you.

###### Image with fading parts (code default written for bot images)
Credits to Maddieismystar
```
<style>
.css-1yg1q7c{
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>
```
If you want to decrease the faded part, add more `black` like so:
`(black, black, black, transparent)`For more info on messing around with the gradient property, look [here](https://www.w3schools.com/css/css3_gradients.asp)
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_3s11ct.png)
* Image Masks Using Clip-Path
The `clip-path` property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset). Similar to doing `masks`, however this involves creating your own shapes.
(This is an alternate to doing image masks as `url()` has been disabled.)
To start, go to this [page](https://bennettfeely.com/clippy/). This page is a generator and provides you a code for a shape. You are also able to use this page to create your own shapes.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_sianfe.png =717xauto)hen you form your shape, a code for it is generated here:
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_pgu6z0.png)ou can then include it in your code like so:
```
<class id> {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
```
For class IDs, go [here](https://janitorai.crisp.help/en/article/code-collection-class-idselements-tfupgb/)[!](https://cssforjai.ju.mp/#cc3)
These should work for both bot images and your profile pfp.



| Previous Article | Next Article |
| ---- |
| [Return to Code Collection](https://janitorai.crisp.help/en/article/a-guide-to-css-code-collection-1ez72vq/) | [Code Collection: Misc](https://janitorai.crisp.help/en/article/code-collection-misc-1tga9by/) |