Good evening!
There is a bulletin board where the general list of ads is rows. If you turn on the “VIP ad” function, the string is painted in another color. Trying to fasten the picture “VIP” to the angle over the ad image of the ad. However, Div
has variables that determine which announcement is simple or VIP, and use different CSS styles. How to fasten the picture on top in this case?
& lt; td valign = "top" width = "{$ colwidth}%" & gt;
& lt; div class = "bd_item {{$ con .is_vip} _vip {/ if}" & gt;
variables responsible for simple or VIP ad
& lt; table width = "100%" height = "" CellSpacing = "" CellPadding = "0" class = "b_table_tr "& gt;
& lt; TR & GT;
{if $ cfg.photos}
& lt; TD width = "90" Valign = "Top" & gt;
& lt; img class = "bd_image_small" src = "/ images / boards / small / {$ con.file}" border = "0" alt = "{$ con.title | escape: 'html'}" / & gt;
& lt; / td & gt;
Answer 1, Authority 100%
In your example, there is not enough information on the structure, but I will risk posting the implementation. demo .
html
& lt; div class = "bd_item bd_item_vip" & gt;
& lt; img src = "/ path / to / image" & gt;
& lt; / div & gt;
css
. BD_IPEM {
Position: relative;
width: 140px;
Overflow: Hidden;
}
.bd_item_vip: after {
CONTENT: 'VIP';
Background: # C76649;
z-index: 800;
Padding-TOP: 3px;
Color: White;
Font-Family: Roboto;
Letter-Spacing: 1px;
font-weight: 400;
TEXT-TRANSFORM: NONE;
Text-Align: Center;
Display: INLINE-BLOCK;
width: 100px;
Font-Size: 10px;
Line-Height: 14px;
-Webkit-Transform-Origin: Center Center;
-MS-transform-origin: center center;
Transform-Origin: Center Center;
Top: 3px;
Border-Bottom: 2px Solid # 7A3521;
Right: -38px;
-WebKit-Transform: Rotate (45deg);
-MS-transform: rotate (45deg);
Transform: Rotate (45deg);
Position: Absolute;
}